如何在html文档中动态突出显示文本

how to dynamically highlight text in an html document

本文关键字：显示 文本 动态 html 文档      更新时间：2023-09-26

我在HTML页面中有几个元素（它们不共享标记类型），我想在其中突出显示用户输入的单词的所有实例。我的想法是，我可以使用replace函数来用替换所有say"fox"的实例

<font class='highlight'>fox</font>

我的问题是，如何使这些元素可识别？我尝试使用类，但我公司的IE版本不支持getElementsByClassName。有人知道更好的方法吗？

我的页面可能看起来像的示例

<body>
    <h1>All about foxes</h1>
    <font>I'm a fox</font>
</body>

只是为了说明它们是不同类型的标签。在该示例中，如果用户输入"fox"，h1标记和字体标记中的fox将高亮显示。显然，必须使用一些东西来识别h1和字体标记，将其作为某个组的一部分，我可以获取该组的所有成员。

因为页面上显示的内容也是动态确定的，所以我需要一种使用Javascript的方法。

编辑：对上一个代码示例的添加。

<body>
    <h1>All about foxes</h1>
    <font>I'm a fox</font>
    <h3>I'm not a fox</h3>
</body>

我需要一种方法来特别标记h1和字体标签（并不是说所有的h1和font都应该标记），这样它们就会突出显示，而h3不会突出显示（以及页面上的任何其他fox实例）。此外，在我的环境中包含外部JS文件（或任何外部文件）也是一件痛苦的事情。出于这个原因，如果我不必使用JQuery，我更喜欢它。

如果您已经在适当的位置获得了class='highlight'，您可以使用以下内容，它在功能上等效于getElementsByClassName:

elems = document.getElementsByTagName("*");
for ( i=0; i<elems.length; i++ )
{
  if ( elems[i].className == "highlight" )
     { elems[i].style.backgroundColor = "yellow"; }
}

示例：http://jsfiddle.net/XU8Qz/

只要做任何你需要的样式更改，而不是将背景色设置为黄色。

相关文章：