【前端】搜索列表关键字高亮显示

最新推荐文章于 2024-06-21 14:20:11 发布

原创最新推荐文章于 2024-06-21 14:20:11 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #js #jquery #css

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的高亮显示方法，该方法能够帮助开发者在页面上对指定的文本进行高亮处理，增强用户体验。

【参考方法】
/**
 * 高亮显示方法
 */
function highlight(searchText, className) {
    //创建正则表达式
    let regExp = new RegExp(searchText, "g");
    $("." + className).each(function () {
        let html = $(this).html();
        //将找到的关键字替换，加上highlight属性
        let newHtml = html.replace(regExp, "<span style='color:#dd2421;margin-left:3px;margin-right:3px;' >" + searchText + "</span>");
        //更新标题
        $(this).html(newHtml);
    });
}

【显示效果】