js实现html搜索关键词高亮显示（标红）

效果图：

一、只适用于找出中文

如果传入英文会特别麻烦，因为比如传个a，innerHtml匹配时会匹配到包含a的标签比如<span>、<a>等。

思路：

获取body的innerHtml，配合正则和字符串方法replace方法。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.search {color: red;}</style>
</head><body><div id="text"><span>a</span><p>窗透初晓 日照西桥 云自摇 </p><p>想你当年荷风微摆的衣角 木雕流金 岁月涟漪 </p><p>窗透初晓 日照西桥 云自摇 </p><p>想你当年荷风微摆的衣角 木雕流金 岁月涟漪 </p><span>bbb</span></div><span>aabbb</span>
</body>
<script>function find(searchVal) {let html = document.getElementsByTagName("body")[0];var reg1 = /<script[^>]*>(.|\n)*<\/script>/gi;let htmlText = html.innerHTML.replace(reg1, "");let re = new RegExp(searchVal, "ig");html.innerHTML = htmlText.replace(re, `<span class="search">${searchVal}</span>`);}find("窗透");</script></html>

二、适用于中文和英文（但是英文不包括大小通用）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.search {color: red;}</style>
</head><body><div id="text"><span>a</span><p>窗透初晓 日照西桥 云自摇 </p><p>想你当年荷风微摆的衣角 木雕流金 岁月涟漪 </p><p>窗透初晓 日照西桥 云自摇 </p><p>想你当年荷风微摆的衣角 木雕流金 岁月涟漪 </p><span>bbb</span></div><span>aabbb</span>
</body>
<script>find('窗透')find('aa')function find(searchVal, bgColor) {var oDiv = document.getElementsByTagName("body")[0];var sText = oDiv.innerHTML;var reg1 = /<script[^>]*>(.|\n)*<\/script>/gi; //去掉script标签 sText = sText.replace(reg1, "");var bgColor = bgColor || "orange";var sKey = "<span name='addSpan' style='background-color: " + bgColor + ";'>" + searchVal + "</span>";var num = -1;var rStr = new RegExp(searchVal, "g");var rHtml = new RegExp("\<.*?\>", "ig");//匹配html元素var aHtml = sText.match(rHtml); //存放html元素的数组sText = sText.replace(rHtml, '{~}');  //替换html标签sText = sText.replace(rStr, sKey); //替换keysText = sText.replace(/{~}/g, function () {  //恢复html标签num++;return aHtml[num];});oDiv.innerHTML = sText;}
</script></html>

三、适用于中文和英文（大小写也通用）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.search {color: red;}</style>
</head><body><div id="text"><span>a</span><p>窗透初晓 日照西桥 云自摇 </p><p>想你当年荷风微摆的衣角 木雕流金 岁月涟漪 </p><p>窗透初晓 日照西桥 云自摇 </p><p>想你当年荷风微摆的衣角 木雕流金 岁月涟漪 </p><span>bbb</span></div><span>aabbb</span><span>AA7BB</span><span>aA7</span><span>aa7</span>
</body>
<script>find('aA7')function find(searchVal, bgColor) {var oDiv = document.getElementsByTagName("body")[0];var sText = oDiv.innerHTML;var reg1 = /<script[^>]*>(.|\n)*<\/script>/gi; //去掉script标签 sText = sText.replace(reg1, "");var bgColor = bgColor || "orange";var num = -1;var rStr = new RegExp(searchVal, "gi"); //匹配传入的搜索值不区分大小写 i表示不区分大小写，g表示全局搜索var rHtml = new RegExp("\<.*?\>", "ig");//匹配html元素var aHtml = sText.match(rHtml); //存放html元素的数组var arr = sText.match(rStr);a = -1;sText = sText.replace(rHtml, '{~}');  //替换html标签sText = sText.replace(rStr, function () {a++;return "<span name='addSpan' style='background-color: " + bgColor + ";'>" + arr[a] + "</span>"}); //替换keysText = sText.replace(/{~}/g, function () {  //恢复html标签num++;return aHtml[num];});oDiv.innerHTML = sText;}
</script></html>

总结：

之所以这么麻烦是因为英文还得去除不匹配标签，还得不区分大小写。如果只是中文则简单的多。我这个可能有些麻烦，如果有简单互相交流学习。

js实现html搜索关键词高亮显示（标红）相关推荐

JS实现HTM搜索关键词高亮显示
如何利用JS实现HTML搜索关键词高亮显示呢? 目录一.程序案例代码二.程序运行效果一.程序案例代码 <!DOCTYPE html> <html lang="en&q ...
C#中搜索关键词高亮显示
在搜索关键词高亮中一般的方法都是采用替换的办法(Replace)这个方法有一个缺点就是不能区分大小写的问题.在网上找了找发现有人用正则表达式的方法来解决这个问题还真不错,效率也比较高,归纳如下,有用得 ...
android关键词检索功能,Android实现搜索关键词高亮显示-Kotlin
在做Wandroid项目时有一个搜索功能,要在搜索结果中将匹配到的关键词高亮显示.但是玩安卓API并没有提供颜色的高亮,只有字体斜体,效果看起来并不明显,并且昵称也参与了搜索,但并没有增加HTML标 ...
多个关键词高亮/标红-完美版（多种特殊情况均包含）
需求背景: 将一段文本中的指定多个关键词标红. 需求分析及特殊情况多关键词需要逐一匹配标红即:将命中关键词的套上 <span style="color: red" ...
js 获取百度搜索关键词的代码
有可能有时候我们会用到在百度搜什么关键词进来我们的网站的,所有我们又想拿到用户搜索的关键词. 这是我研究了半天所得出的办法.话不多说直接贴代码 <script>function query ...
Vue---实现搜索功能的搜索关键词高亮显示
1.模板代码: <div v-html="hightligth(text)"></div> text为自己的文本搜索结果,比如黄某某例子: 现在我的搜索关 ...
js根据输入关键字给字体标红、变红
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content=& ...
javascript(js)获取访客通过搜索引擎进入页面的搜索关键词的简洁有效代码
最近需要用到这么一个功能,就是如果用户是通过搜索引擎进来浏览页面的,那么就通过js获取其搜索关键词,找了很久,终于找到一个比较好用而且又简洁的代码,在此也感谢分享者,搜索引擎只包括谷歌和百度的,其他类 ...
php 百度来路关键词,php获取百度搜索关键词的方法[方法过时了]
本来是想找一段通过js获取百度关键词的方法的,结果找并且测试获取到是可以就是只能获取到英文字符,如果是汉字就会乱码!知道可能是转码的问题,使用之前用过的代码也出现这样的问题!刚好看到php获取搜索关键 ...

js实现html搜索关键词高亮显示（标红）

效果图：

一、只适用于找出中文

二、适用于中文和英文（但是英文不包括大小通用）

三、适用于中文和英文（大小写也通用）

总结：

js实现html搜索关键词高亮显示（标红）相关推荐

最新文章

热门文章

js实现html搜索关键词高亮显示（标红）

效果图：

一、只适用于找出中文

二、适用于中文和英文（但是英文不包括大小通用 ）

三、 适用于中文和英文（大小写也通用）

总结：

js实现html搜索关键词高亮显示（标红）相关推荐

最新文章

热门文章

二、适用于中文和英文（但是英文不包括大小通用）

三、适用于中文和英文（大小写也通用）