高亮显示搜索的关键词(二)

上一篇关于高亮显示搜索的关键词，用的是个项个项高亮，需要用户一步一步点击，才能看到所有搜索到的位置，用的是DOM操作的聚焦和setCreateRange，一旦用户做其他操作（失焦），就是去高亮效果。

下面使用的是多段落中的查找内容进行html替换，加上background: red样式。可以高亮显示所有查找出的关键词，并且不会失焦。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /></head><body><label for="">key words:</label><input type="text" id="key_words" /><button type="button" id="find_btn">find</button><div id="content">乔布斯掌权时代的iPhone以精湛的做工受到广泛的关注，也受到了大量的果粉追捧。iPhone4S的黄金尺寸设计，再到iPhone5s的巅峰状态，但是iPhone6的横空出世似乎打破了苹果公司在工艺方面的追求。虽然iPhone6及其iPhone6 Plus的销量比前几代产品都要高 （原因受安卓大屏冲击的影响，果粉对大屏手机的欲望愈加的浓烈），但是收到广泛吐槽也是最多的。大白条，尤其是突出的摄像头，乔布斯知道估计都能从坟里跳出来！ 不喜欢的iPhone6的果粉可以等等了，iPhone7马上就要来临了，这是国外设计师设计出的一部iPhone7的概念图，这部iPhone7不仅做工精湛， 而且消除了打白条和涉嫌头突出问题，更重要的是采用了iPhone4的双面玻璃设计，边角做出了圆润设计，不仅时尚，而且商务气息十足， 适合追求时尚的年轻人和商务人士使用，受用人群更广泛了。</div></body><script type="text/javascript">var origin_text = document.getElementById("content").innerText;document.getElementById("find_btn").onclick = function() {var get_arr = [];var key_word = document.getElementById('key_words').value;var key_word_len = key_word.length;var index = origin_text.indexOf(key_word);while(index !== -1) {get_arr.push(index);index = origin_text.indexOf(key_word, index + 1);}selectedText = "<span style='background:red'>" + key_word + "</span>";var temp_str = '';for (var i = 0, search_len = get_arr.length; i < search_len; i++) {temp_str += origin_text.substring(i === 0 ? 0 : get_arr[i-1] + key_word_len, get_arr[i]) + selectedText;}temp_str += origin_text.substring(get_arr[search_len-1] + key_word_len);document.getElementById("content").innerHTML = temp_str;};</script></html>

效果如下：

本来想用replace方法，应该会更简洁，不用像上面那样一步一步的拼接了。若有其他办法的伙伴，请@我。

转载于:https://www.cnblogs.com/bagexiaowenti/p/8017387.html

高亮显示搜索的关键词(二)相关推荐

从二值检索到层次竞买图——让搜索广告关键词召回焕然新生
丨目录: · 背景 · 广告改写的历史与新目标 · 从两阶段到一段式:二值海选 · 从一段式到联合召回:层次竞买图 · 关键词召回的业务思考本文主要分享过去一年我们在搜索广告召回的传统领域--关键词 ...
ecshop 搜索热词推荐_多多搜索自定义关键词推广的基础点：如何选对致命的关键词...
很多商家可能会疑惑我为什么不讲点击率,点击率固然重要,但其实多多搜索是围绕关键词展开的.正所谓万丈高楼平地起,关键词才是多多搜索的基础,没有这个基础,买家都搜不到你,或者搜到了却不是精准人群,点击率也 ...
搜索不包含关键词_关键词排名：搜索同一个关键词，每次的排名却不一样？
我们去搜一个关键词的时候,搜索的排名结果都会不同,通常存在如下两种情况: 1.同一个用户搜索相同关键词,排名结果不同. 2.不同用户搜索相同关键词,排名结果不同. 这对于一些刚入行的小伙伴来讲,非常让 ...
谷歌搜索语法（二）高级语法
Google搜索语法(二)高级语法接上篇:谷歌搜索语法(一)基本语法通过上一篇博客,我们介绍了google的基本搜索语法,在生活中合理的运用这些搜索语法就可以协助我们更加精确.高效的找到我们想要的 ...
Google搜索语法（二）高级语法
Google搜索语法(二)高级语法接上篇:谷歌搜索语法(一)基本语法通过上一篇博客,我们介绍了google的基本搜索语法,在生活中合理的运用这些搜索语法就可以协助我们更加精确.高效的找到我们想要的 ...
长尾关键词在线采集，搜索长尾关键词的工具
大家好,今天给大家介绍一个好用的采集长尾关键词的工具,操作简单.虽然之前提到过,但是有些小伙伴还是不知道怎么用.下面一起来看看吧. 长尾关键词在线采集怎么操作? 首先打开iis7长尾词挖掘,输入需要查 ...
python实现文件搜索_python实现搜索指定目录下文件及文件内搜索指定关键词的方法...
本文实例讲述了python实现搜索指定目录下文件及文件内搜索指定关键词的方法.分享给大家供大家参考.具体实现方法如下: #!/usr/bin/python -O # -*- coding: UTF-8 ...
没有搜索_没有明显足够搜索量关键词的类目产品应该怎么办？
没有明显足够搜索量关键词的类目产品应该怎么办? 如果我们产品的需求搜索量不够多,那我们可以用搭售抱大腿的方式来处理关键词. 最经常的情况就是我在阿里巴巴的产品曝光量不够,点击率更低.收集调整了很多的关 ...
C语言Catalan number卡特兰数(使用n个键可以搜索多少个二叉搜索树)的算法(附完整源码)
C语言使用n个键可以搜索多少个二叉搜索树的算法 C语言使用n个键可以搜索多少个二叉搜索树的算法完整源码(定义,实现,main函数测试) C语言使用n个键可以搜索多少个二叉搜索树的算法完整源码(定义,实 ...
PHP与SEO，应用curl及正则获取搜狗搜索相关关键词
PHP是世界上最好的语言,来吧,入坑吧,我们一起来拍(pai)黄(huang)片(pian),Sorry,手抖,打错字了,当然是学习简写的,php啦!PHP即"超文本预处理器",是 ...

高亮显示搜索的关键词(二)

高亮显示搜索的关键词(二)相关推荐

最新文章

热门文章