【前端开发实例】HTML 检索内容关键字 JS 高亮显示 -（二）

最新推荐文章于 2024-02-04 18:03:51 发布

VIP文章一点编程

最新推荐文章于 2024-02-04 18:03:51 发布

阅读量7.3k

点赞数 2

分类专栏：开发实践前端文章标签： html 高亮显示

本文链接：https://blog.csdn.net/jasonapoint/article/details/78235137

版权

Question. 问题

在开发过程中，我们会遇到需要高亮显示的文本，无论是新闻、产品还是案例的检索，对于检索到的内容，都会产生这样的需求，一种好的处理方式就是通过 JS 实现。先来看看 PC 端的百度和移动端的微信的检索结果：

这里写图片描述

Solution. 解决

我们先来看一段简化的 JS 来实现关键字高亮显示的功能：

function setHeightKeyWord(keyword) {
   
    /* 获取需要处理的关键字 */
    var tempHTML = $("#text").html();
    /* 关键字替换文本 该文本设置有高亮颜色 */
    var replaceText = "<font style='color:red;'>$1</font>";
    /* 关键字正则匹配规则 */
    var r = new RegExp("(" + keyword + ")", "ig");
    /* 将匹配到的关键字替换成我们预设的文本 */
    tempHTML = tempHTML.replace(r, replaceText);
    /* 将文本显示到浏览器上 */
    $("#text").html(tempHTML);
}