выделить динамически сгенерированный текст - PullRequest
Новая
       0

выделить динамически сгенерированный текст

0 голосов
/ 30 марта 2012

Я создаю страницу для отображения pdf, и я использовал проект pdf.js Mozilla для рендеринга pdf.

pdf.js создает несколько динамических элементов div визуализированного текста под тэгом canvas.Я хочу выделить текст моего PDF.Ниже приведен код, сгенерированный динамически с помощью 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>

Может ли кто-нибудь дать мне способ выделить текст из приведенного выше кода с помощью Javascript (если это возможно)?

1 Ответ

0 голосов
/ 30 марта 2012

Учитывая, что <div class="textLayer">...</div> является только контейнером для динамически генерируемого текста, и эта структура остается прежней, вы можете сделать что-то вроде: 

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

Обратите внимание, что с jQuery это может быть намного проще: 

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

Затем вам нужно добавить определение класса подсветки по желанию, например, 

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

Тем не менее, вы можете полностью пропустить бит JS и просто добавить этот стиль в заголовок: 

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