JS实现关键字变色：字体与背景

"JS关键字变色的实现方法通常涉及到文本中的特定词汇高亮显示，以增强用户阅读体验。本文将介绍两种主要的实现思路：通过替换关键字改变字体颜色和使用正则表达式配合CSS背景变色。这两种方法都可以与前端JavaScript进行交互，适合对网页中的关键词进行视觉突出。" 在JavaScript中实现关键字变色，首先我们可以采用简单的字符串替换方法。如以下代码所示，定义一个`ReplaceRed`函数，接收两个参数，一个是原始字符串，另一个是要变色的关键字。如果关键字为空或不存在，则直接返回原始字符串。否则，使用`Replace`方法将所有出现的关键字替换为带有红色字体颜色的HTML标签。这种方法简单易懂，但存在一个问题，即不区分大小写，且当关键字包含点字符（.）时，可能导致用户体验不佳。 ```javascript function replaceRed(strTitle, redKey) { if (!redKey || redKey === "") { return strTitle; } else { return strTitle.replace(new RegExp(redKey, 'g'), `<font color='#ff0000'>${redKey}</font>`); } } ``` 为了解决上述问题，我们可以使用正则表达式和CSS来实现更灵活的关键字高亮。这里有一个`HighlightText`函数，它接受输入文本和搜索词，创建一个正则表达式对象，忽略大小写匹配。然后，使用`Replace`方法和`MatchEvaluator`回调函数，将匹配到的关键字包裹在带有`highlightTxtSearch`样式的`span`标签内。这种方法可以结合前端JS调用，实现动态的关键词高亮。同时，你可以选择改变字体颜色或者设置背景色。 ```javascript function highlightText(inputText, searchWord) { const regex = new RegExp(searchWord.replace(".", "\\."), "gi"); return inputText.replace(regex, function (match) { return `<span class='highlightTxtSearch'>${match}</span>`; }); } ``` 在前端，我们需要定义相应的CSS样式，例如： ```css .highlightTxtSearch { background-color: yellow; /* 可根据需要更改背景颜色 */ /* 若需改变字体颜色，可以移除注释 */ /* color: #ff0000; */ } ``` 通过这种方式，你可以使网页中的关键字在用户界面上更加醒目。需要注意的是，这种方法可能会对性能产生一定影响，特别是在处理大量文本时。因此，对于大型文本的处理，可能需要考虑更优化的解决方案，如分块处理或使用虚拟DOM等技术。