需求:找出字符串中的指定字符串并修改颜色以下为html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style/css.css" > <style> span { color:red; } </style> </head> <body> <div> <p id="text">这次的代码变化比较大,不再直接把远程js文件写死,而是编码实现动态查询,而这也正是jsonp客户端实现的核心部分,本例中的重点也就在于如何完成jsonp调用的全过程。我们看到调用的url中传递了一个code参数,告诉服务器我要查的是CA1998次航班的信息,而callback参数则告诉服务器,我的本地回调函数叫做flightHandler,所以请把查询结果传入这个函数中进行调用。OK,服务器很聪明,这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html(服务端的实现这里就不演示了,与你选用的语言无关,说到底就是拼接字符串)。 </p> <input id="shuru" type="text" value=""> <input id="btn" type="button" value="button" > <script type="text/javascript" src="js/js.js"> </script> </div> </body> </html>
以下为js
var Txt = document.getElementById('text'); var inputBox = document.getElementById('shuru'); var btn = document.getElementById('btn'); // alert(Txt.innerHTML); var txt = Txt.innerHTML; alert(typeof txt); var adminTxt; // alert(txt.match(adminTxt))x; function get(){ adminTxt = inputBox.value; } btn.onclick = function () { get(); txt.replace(/adminTxt/g,"<span>"+ adminTxt + "</span>"); }
为什么单击按钮后没反应呢?
1.txt保存的是innerhtml的副本;2.replace方法不会改变字符串本身;
最后一行加个xxx.innerhtml = 应该就可以了
1)使用RegExp代替字面量声明2)replace后返回的数据要重新复制回去
var d=txt.replace(new RegExp('CA1998','g'),""+ adminTxt + "");