高亮显示搜索的关键词(二)
上一篇关于高亮显示搜索的关键词，用的是个项个项高亮，需要用户一步一步点击，才能看到所有搜索到的位置，用的是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方法，应该会更简洁，不用像上面那样一步一步的拼接了。若有其他办法的伙伴，请@我。
