0

I am creating a page to show pdf and I used pdf.js project of Mozilla to render pdf.

pdf.js is making multiple dynamic divs of rendered text under canvas tag. I want to highlight some text of my pdf. Following is the code generated dynamically by pdf.js:

<div id="pageContainer1" class="page" style="width: 741.8181818181818px; height: 959.9999999999999px; " data-loaded="true">
<canvas id="page1" width="741" height="959"></canvas>
<div class="textLayer">
<div data-canvas-width="300.69542660606743" data-font-name="Times" style="font-size:12.06334818181817px; left: 173.1905882352941px; top: 8.593899292929294px; -webkit-transform: scale(0.9002857084013994, 1); -webkit-transform-origin-x: 0%; -webkit-transform-origin-y: 0%; " dir="ltr" data-text-length="58">Boston&nbsp;University&nbsp;Computer&nbsp;Science&nbsp;Technical&nbsp;Report&nbsp;No.&nbsp;20</div>
</div>
</div>

Can any one provide me a way to highlight the text from above code with Javascript (if possible)?

hiteshtr
  • 443
  • 2
  • 5
  • 20

1 Answers1

0

Given that <div class="textLayer">...</div> is only the container for dynamically generated text, and that structure remains the same, you can do something like:

var dynElems = document.getElementsByClassName('textLayer');
for (var i=0; i<dynElems.length; i++) {
    dynElems[i].className += " highlight";
}

Note this could be much simpler with jQuery:

$('.textLayer').addClass('highlight');

Then you need to add definition of your highlight class as desired, e.g. 

.textLayer.highlight>div {
    background-color: #EFEFEF;
}

That said, you could skip JS bit entirely and just add this style to the header:

.textLayer>div {
    background-color: #EFEFEF;
}
Shagglez
  • 1,522
  • 3
  • 21
  • 38
  • I do not want all text to be highlighted and the div with class textLayer is present in pageContainer, there are more than one page container like pageContainer2.. etc – hiteshtr Mar 31 '12 at 04:18
  • I used code like this to access specific text layer but that doesn't working : var dynElems = document.getElementById("page1").getElementsByClassName('textLayer'); – hiteshtr Mar 31 '12 at 04:18
  • @hiteshtr There is nothing wrong with that code, it should work just fine. Check your markup to see if there is an element with `id="page1"` and it contains element(s) with `class="textLayer"` – Shagglez Mar 31 '12 at 11:33