JS正则搜索实例解析-优快云博客

本文链接：https://blog.youkuaiyun.com/ACMZJY/article/details/80494014

本文介绍了如何使用JavaScript和正则表达式实现一个简单的搜索功能。通过理解并应用`RegExp.exec()`方法，实现对文本中特定内容的查找，并对搜索结果进行高亮处理。文章强调了`lastIndex`属性在正则匹配过程中的作用，以及`exec()`方法返回值的结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在看正则，于是自己动手做了一个基于JS、使用正则表达式的搜索实例，主要功能就是在文本中搜索特定的内容。

可以先写个简易的样式：

html

<div id="box">
    <form>
        <textarea id="textCon" rows="10" cols="70">
        </textarea>
        <p>
            Please enter content <input id="searchCon" type="text"/>
        </p>
    </form>
    <button id="search">search</button>
</div>
<div id="resultCon"></div>

css

        <style type="text/css">
            #box{
                border: chartreuse solid 1px;
                width: 600px;
                font-size: 16px;
            }
            #resultCon{
                margin-top: 5px;
                width: 600px;
                border: saddlebrown solid 1px;
            }
            span{
                background-color: aqua;
            }
        </style>

然后就是这个实例最关键的JS

        <script>
            document.getElementById("search").onclick=function(){

                    //获取搜素模式
                    var searchCon=document.getElementById("searchCon").value;
                    var re=new RegExp(searchCon,"g");

                    //获取搜索对象
                    var textCon=document.getElementById("textCon").value;

                    var start=0;
                    var end=0;
                    var newString="<p>";
                    var arr;
                    //生成新的字符串
                    while((arr=re.exec(textCon))!=null){
                        end=arr.index;

                        newString+=textCon.substring(start,end);
                        newString+="<span>"+arr[0]+"</span>";

                        start=re.lastIndex;
                    }
                    newString+=textCon.substring(start,textCon.length)+"</p>";
                    //输出显示
                    document.getElementById("resultCon").innerHTML=newString;
                }
        </script>

JS的思路就是在源文本以关键字（即搜索对象）为拆分点，将源文本拆开，然后为关键字添加高亮，再按原文顺序重新组合成文本输出。

注意：请先写好源文本，在搜索框里输入的内容如果符合正则的写法，即可搜得相应内容（不需要两端加“/”）。

关键是明白arr.index、arr[0]和re.lastIndex

正则中的.lastIndex 返回当前匹配结果下一次匹配的起始位置。也可以手动设置lastIndex的值，用于设置指定的起始位置。

补充一下RegExp exec()方法

我感觉这是个常用且好用的方法，它的返回值很丰富。

exec()方法可以返回匹配的结果，以及结果在字符串中的索引和下一次匹配的起始位置。

如果正则表达式没有匹配到结果，那么返回的值就是 null。

exec方法在匹配到的情况下，返回的是一个数组，数组的格式如下：

var result = /bcd/.exec('abcdaefgbcd');
result[0] // -> 当前匹配到的结果:  bcd
result.input // -> 进行匹配操作的字符串:  abcdaefgbcd  
result.index // -> 当前匹配结果首字母在字符串中的索引:  1

如有错误，请帮忙指正，谢谢。