突出显示动态生成的文本答案

【问题标题】：highlight dynamically generated text突出显示动态生成的文本
【发布时间】：2012-03-30 20:55:27
【问题描述】：

我正在创建一个页面来显示 pdf，我使用 Mozilla 的 pdf.js 项目来呈现 pdf。

pdf.js 在画布标签下制作多个渲染文本的动态 div。我想突出显示我的 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 突出显示上述代码中的文本的方法（如果可能的话）？

【问题讨论】：

标签： javascript html highlight

【解决方案1】：

鉴于<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;
}

【讨论】：

我不希望所有文本都被突出显示，并且 pageContainer 中存在带有 textLayer 类的 div，有多个页面容器，如 pageContainer2.. 等
我使用这样的代码来访问特定的文本层，但这不起作用：var dynElems = document.getElementById("page1").getElementsByClassName('textLayer');
@hiteshtr 该代码没有任何问题，它应该可以正常工作。检查您的标记以查看是否存在带有 id="page1" 的元素，并且它包含带有 class="textLayer" 的元素