Question

我在HTML页面中有几个元素（不共享标记类型），我想在其中突出显示用户输入的单词的所有实例。我的想法是我可以通过使用替换功能用

替换所有说“fox”的实例来做到这一点

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

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

我的网页可能是什么样子

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

只是为了说明他们是如何使用不同类型的标签。在该示例中，如果用户输入“fox”，则h1标签中的狐狸和字体标签将被突出显示。显然必须使用某些东西来识别h1和字体标签作为某些组的一部分，我可以抓住所有成员。

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

编辑：上一代码示例的补充。

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

我需要一种方法来专门标记h1和字体标签（不是说所有h1和字体都应该被标记）以便它们突出显示而h3不会（以及其他任何狐狸实例）页）。此外，在我的环境中包含外部JS文件（或任何外部文件）是很痛苦的。出于这个原因，如果我不必使用JQuery，我会更喜欢它。

Answer 1

如果您已在适当的位置获得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/

只需进行所需的样式更改，而不是将背景颜色设置为黄色。

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

1 个答案: