通过正则+match+replace方法，实现查找匹配指定文字并高亮显示

最新推荐文章于 2024-06-22 12:05:43 发布

Show_Yeah

最新推荐文章于 2024-06-22 12:05:43 发布

阅读量657

点赞数

分类专栏： JS 文章标签：正则正则匹配正则表达式查找关键字关键词匹配

本文链接：https://blog.csdn.net/qq_32183965/article/details/103068568

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>正则表达式</title>
    <style>
        body {
            width: 750px;
            margin: 50px auto 0 auto;
        }
        #word {
            margin-top: 30px;
        }
        #res {
            font-size: 13px;
            color: #999;
        }
    </style>
</head>
<body>

<div id="main">
    JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
    在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [1]
    为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，JavaScript兼容于ECMA标准，因此也称为ECMAScript。
</div>
<input type="text" id="word">
<input type="button" id="btn" value="匹配">
<p id="res"></p>

<script type="text/javascript">
    var main = document.getElementById('main'),
        str = main.innerHTML,
        btn = document.getElementById('btn'),
        res = document.getElementById('res');
    btn.onclick = function(){
        var word = document.getElementById('word').value,  //获取输入的字符
            pattern = new RegExp(word,'g'),  //创建正则表达式，设置g全局匹配
            count = str.match(pattern).length;  //match方法获取匹配个数
        main.innerHTML = str.replace(pattern,"<span style='background: yellow;color: red'>"+word+"</span>"); //通过replace+正则表达式方法，替换旧文本
        res.innerHTML = '匹配到'+count+'个'+'"'+word+'"';
    }
</script>
</body>
</html>