如何用jquery实现搜索到的关键字标红显示?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何用jquery实现搜索到的关键字标红显示?相关的知识,希望对你有一定的参考价值。

参考技术A

代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.js" ></script>
<script>
$(function()
toRed("我是");
);

function toRed(content)
var bodyHtml = $("body").html();
console.info(bodyHtml);
var x = bodyHtml.replace(new RegExp(content,"gm"),"<font color='red' >"+content+"</font>")
$("body").html(x);
console.info(x);

</script>
</head>
<body>
<div>
哈哈哈哈哈哈我是。。。。。。。。。。。
<div>asdasd  a我是。。。。。。、、

阿斯达实打实的我是

<span>asd asd 我是</span>
</p>
</div>
</div>

我是asdljkalsdkjklajsdljlajkds</p>
<div>asdkh我是afsgfgfgg</div>
</body>
</html>

代码全部结束。

如何用jquery实现搜索到的关键字标红显示

先将就这么用下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script>
            $(function()
                toRed("我是");
            );
            
            function toRed(content)
                var bodyHtml = $("body").html();
                console.info(bodyHtml);
                var x = bodyHtml.replace(new RegExp(content,"gm"),"<font color='red' >"+content+"</font>")
                $("body").html(x);
                console.info(x);
            
        </script>
    </head>
    <body>
        <div>
            哈哈哈哈哈哈我是。。。。。。。。。。。
            <div>asdasd  a我是。。。。。。、、
                <p>阿斯达实打实的我是
                
                    <span>asd asd 我是</span>
                </p>
            </div>
        </div>
        <p>我是asdljkalsdkjklajsdljlajkds</p>
        <div>asdkh我是afsgfgfgg</div>
    </body>
</html>

参考技术A

代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.js" ></script>
<script>
$(function()
toRed("我是");
);

function toRed(content)
var bodyHtml = $("body").html();
console.info(bodyHtml);
var x = bodyHtml.replace(new RegExp(content,"gm"),"<font color='red' >"+content+"</font>")
$("body").html(x);
console.info(x);

</script>
</head>
<body>
<div>
哈哈哈哈哈哈我是。。。。。。。。。。。
<div>asdasd  a我是。。。。。。、、

阿斯达实打实的我是

<span>asd asd 我是</span>
</p>
</div>
</div>

我是asdljkalsdkjklajsdljlajkds</p>
<div>asdkh我是afsgfgfgg</div>
</body>
</html>

代码全部结束。

参考技术B 你这个不行啊 搜索出来的都是多条数据 然而你这样都把他们变成一个标题了

以上是关于如何用jquery实现搜索到的关键字标红显示?的主要内容,如果未能解决你的问题,请参考以下文章

类似于百度显示搜索结果时将关键字标红

解决 ecshop 搜索特殊字符关键字(如:*,+,/)导致搜索结果乱码问题

Vue实现搜索关键字标红高亮加粗

Vue实现搜索关键字标红高亮加粗

急!如何用javascript写一个html页内关键字的搜索

如何用WPS或者Word自动提取关键词?或者显示词频较高的词?