replace用法案例

最新推荐文章于 2022-12-07 07:00:00 发布

原创最新推荐文章于 2022-12-07 07:00:00 发布 · 443 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

34 篇文章

订阅专栏

正则表达式

7 篇文章

订阅专栏

本文介绍了一种利用JavaScript和正则表达式实现关键字高亮显示的方法。通过两种不同的途径——使用特殊字符和函数，实现了对特定关键字的颜色变化。这种方式常见于搜索引擎结果页面中，帮助用户快速定位到关键信息。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
</body>
</html>
<script>

    //    关键字变色
    //    大家在一些网站上搜索文章的时候，会发现这么一个现象，就是搜索的关键字会高亮改变颜色显示出来？？
    //    这是怎么实现的呢？？
    //    其实我们可以用正则表达式来实现，具体怎么样实现呢？简单的原理请看下面的代码：


    //第1种方法：基于特殊字符$
    document.write("replace使用场景第一种实现 - 特殊字符 - 关键字变色:"+"<br />");
    var myString="心暖未晴的博客";
    myString=myString.replace(/(暖)/g,"<font color=red>$1</font>");
    document.write(myString+"<br />");



    //第2种方法：基于函数
    document.write("replace使用场景第2种实现 - 牛逼的函数  - 关键字变色:"+"<br />");

    function test(str){
        return "<font color='red'>"+str+"</font>"
    }

    myString="心暖未晴的博客";
    myString=myString.replace(/(暖)/g,test);
    document.write(myString);

</script>