前端怎么实现搜索内容关键字标红

在前端实现搜索内容关键字标红的方法也可以使用 HTML 和 CSS 来实现。一种常见的做法是使用 JavaScript 将需要标红的关键字替换为带有样式的文本，示例代码如下：

<p>这是一段需要搜索的文本。</p>
<p>这是另一段需要搜索的文本。</p>

<script>
function highlightSearchText(searchText) {
    var searchReg = new RegExp(searchText, 'gi');
    var searchElems = document.querySelectorAll('p');
    for (var i = 0; i < searchElems.length; i++) {
        var elem = searchElems[i];
        elem.innerHTML = elem.innerText.replace(searchReg, '<span class="highlight">' + searchText + '</span>');
    }
}
highlightSearchText('搜索');
</script>

<style>
.highlight {
    background-color: red;
    color: white;
}
</style>

在上述示例中，我们首先定义了一个 `highlightSearchText` 函数，该函数接受一个需要搜索的文本关键字作为参数。函数中使用 `querySelectorAll` 方法获取所有的 `<p>` 元素，然后使用 `replace` 方法将匹配到的关键字替换为带有样式的文本。

在样式部分，我们定义了一个 `.highlight` 类，该类设置了标红文本的背景颜色为红色，文字颜色为白色。这样，在页面中搜索到需要标红的文本时，就会以红色背景标红显示。