JS将搜索关键字标红的方法

最新推荐文章于 2024-07-15 17:27:33 发布

大龄代码农民

最新推荐文章于 2024-07-15 17:27:33 发布

阅读量1.2w

点赞数 1

文章标签： JS javascript 搜索标红

本文链接：https://blog.csdn.net/zblue78/article/details/75733991

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Search</title>
        <script type='text/javascript' src='js/jquery.js'></script>
        <script>
            $(document).ready(function() {
                reslut = ""
                key = "src"
                reger1 = new RegExp(key,"gm");

                tmp = '你好src<img src="1.jpg"/>你好src啊s<img src="1.jpg"/>srcrc<img src="1.jpg"/>';
                el = $("<p>" + tmp + "</p>")
                el.contents().each(function(d) {
                    if (el.contents()[d].nodeType == 3)
                        reslut += el.contents()[d].nodeValue.replace(reger1, "<font color='red'>" + key + "</font>")
                    else
                        reslut += el.contents()[d].outerHTML;
                });
                $(function() {

                    $("#search").on("click",function(e){
                         toRed( $("#key").val(), "text");
                    })
                });

                function toRed(content, id) {
                    var bodyHtml = $("#" + id).html();
                    reger = new RegExp("(>|^)([^<]*)(" + content + ")([^>]*<)","gm");
                    reslut = bodyHtml.replace(reger, "$1$2<font color='red'>$3</font>$4");
                    $("#" + id).html(reslut);
                }
            });
        </script>
    </head>
    <body>
        <input type='text' id='key' value='src'/>
        <input type='button' id='search' value='搜索'/>
        <div id="text">
            <div>
                哈哈哈哈哈哈div我是。。。。。。。。。。。



                <div>
                    asdasd  a我是。。。。。。、、



                    <p>
                        阿斯达实src打实的我是
                    <img src="1.jpg"/>
                        <span>asd asd  src 我是</span>
                    </p>
                </div>
            </div>
            <p>我是asdljsrckaimglsdimgkj<klajsdljlajkds</p>
            <div>asssscsrdkh我是afsgsrcfgfgg</div>
        </div>
    </body>
</html>

大龄代码农民

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JS将搜索关键字标红的方法

Search $(document).ready(function() { reslut = "" key = "src" reger1 = new RegExp(key,"gm"); tmp = '你好src
复制链接

扫一扫