Question

我需要在HTML页面中突出显示某个单词。我已设法突出显示该元素，但如果搜索到新单词，我还需要取消突出显示前一个单词。我已经尝试过了这个，高端工作，但它不起作用。 unhighlight部分应该不会突出显示任何包含span id =＆＃39; highlight＆＃39; ...等的行，但不能突出显示当前单词（！word）。

//Unhighlight the previous searched word
var regex_old = new RegExp(\"<span id='highlight'><font style='background-color:#ffff00'>!\"+word+\"</font></span>\", 'gi')
var str_replace_old = word;
block.innerHTML = block.innerHTML.replace(regex_old, str_replace_old);

// Highlight the new word
var regex = new RegExp(word, 'gi');
var str_replace = \"<span id='highlight'><font style='background-color:#ffff00'>\"+word+\"</font></span>\";
block.innerHTML = block.innerHTML.replace(regex, str_replace);

感谢。

Answer 1

您可以在突出显示的当前范围中添加一个类（例如：class =＆＃34; .current＆＃34;）。当您突出显示新单词时，请检查课程是否有＆＃39; .current＆＃39;不要突出显示并删除该类！并将该类添加到新突出显示的跨度！

以便您可以识别当前突出显示的单词，以便取消强调!!

Answer 2

使用正则表达式来识别搜索字符串并在其周围包裹一个范围是有道理的，但是您不需要为不突出显示相同的内容。简单地删除类以指示它被突出显示就可以了。顺便说一句，ID应该是一个唯一的属性，所以使用一个类来表示＆＃34;突出显示＆＃34;会更合适。从所有范围中删除突出显示类后，搜索新字符串并为其指定突出显示范围。

Javascript突出显示/取消高亮字

2 个答案: