需要购买阿里云产品和服务的，点击此链接领取优惠券红包，优惠购买哦，领取后一个月内有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07
代码：
<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>文本高亮</title> <style> .bg-red { background-color: red; } </style> </head> <body> <div style="margin: 20px auto;text-align: center;"> <input type="text" id="search" placeholder="输入要搜索的内容"> </div> <div style=" 90%;margin: 20px auto;" id="con"> <p>在Web开发中经常会碰到需要动态监听输入框值变化的情况，如果使用 onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话，监听不了右键的复制、剪贴和粘贴这些操作，处理组合快捷键也很麻烦。</p> <p>js的replace默认替换只替换第一个匹配的字符，如果字符串有超过两个以上的对应字符就无法进行替换，这时候就要进行一点操作，进行全部替换。 var strM = "这是要被替换的字符串啊啊！...</p> <p>最近在帮公司一个小孩看一个很奇怪的bug,是MFC 的一个小GUI,在客户环境上一个输入框中的数据总是有乱码，导致从数据库中查不出数据。但是奇怪的是在我们环境上重现不了，因为我们的测试环境用的是Win...</p> </div> </body> <script> window.onload = function () { var pNodes = document.getElementById('con').getElementsByTagName('p'); var searchNode = document.getElementById('search'); var pTextArr = []; for(var i=0; i<pNodes.length; i++){ pTextArr.push(pNodes[i].innerHTML); } //监听文本框的内容的变化 searchNode.addEventListener('input', function (e) { var text = this.value; //要匹配的文字 for(var i=0; i<pNodes.length; i++){ var pNode = pNodes[i]; //段落节点 var pText = pTextArr[i]; //每一段的文字 var values = pText.split(text); var pNodeText = values.join('<span class="bg-red">'+text+'</span>'); pNode.innerHTML = pNodeText; } }) } </script> </html>
效果：
