如何用jquery实现搜索到的关键字标红显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用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实现搜索到的关键字标红显示？
参考技术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实现搜索到的关键字标红显示的主要内容，如果未能解决你的问题，请参考以下文章
解决 ecshop 搜索特殊字符关键字（如：*，+，/）导致搜索结果乱码问题