Javascript高亮/取消高亮字

标签 javascript html

我需要在 HTML 页面中突出显示某个单词。我已经设法突出显示该元素,但如果搜索新词,我还需要取消突出显示前一个词。我试过这个,高光有效,但它在非高光下不起作用。 取消突出显示部分应该取消突出显示包含 span id='highlight'...等的任何行,但不取消突出显示当前单词 (!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);

谢谢。

最佳答案

您可以向突出显示的当前跨度添加一个类(例如:class=".current")。 当你突出显示新单词时,检查类是否有'.current'不要突出显示并删除该类!!并将该类添加到新的突出显示范围中!

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

关于Javascript高亮/取消高亮字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24614587/

相关文章:

html - 更改图标标签的 css Sprite 位置

javascript - Div 中的垂直/水平对齐

jquery - 如何使用 jquery 获取下一个 div 数据属性

javascript - JQuery - 复选框未返回 "checked"的正确值

JavaScript 函数 : Returning value after a split

JavaScript,添加我在 parseInt 上一起使用的 2 个变量输出,如字符串

javascript - 使用 jQuery 单击将类添加到父类

javascript - 使用 jQuery 比较具有相同类名但不同 id 的多个输入字段

javascript - 使用 javascript 和 jquery ui 单击事件的 css

javascript - 无法在 useEffect 中模拟函数