如何更改 HTML 中搜索词的颜色？

【问题标题】：How to change color of a search word in HTML?如何更改 HTML 中搜索词的颜色？
【发布时间】：2018-11-24 02:03:58
【问题描述】：

所以在我的 HTML 文件中，我有

 {{searchResult}} 

其中 {{searchResult}} 本质上是我的结果。所以如果我搜索“热”这个词， {{searchResult}} 将包含一个包含文档中单词“hot”的字符串。例如：

“这很热”

网页中显示的一切都很好，但我想更改字符串中搜索词的颜色。

我尝试修改应该在我的 JS 文件中输出内容的部分：

content: result.replace(searchTerm, <span class= "search">searchTerm</span>)

“搜索”类只是改变单词的颜色。

但它显示为网页：这是hot

我将如何使它只改变搜索词的颜色？

【问题讨论】：

【解决方案1】：

您希望更改 html 内容的 style。这是使用CSS 完成的。您可以通过以下三种方式之一执行此操作：

1) 使用内联 CSS 编辑段落颜色： {{searchResult}} 

2) 创建一个外部.css 文件并将您的html 文件链接到文档的<head> 中。在那里使用类似的css：

.result {
  color:red;
}

3) 使用Javascript 编辑DOM 以同样更改颜色：

document.querySelector('.result').style.color='red';

【讨论】：