js正则表达式-根据首尾字符串做匹配替换
1.前言.
js正则表达式博大精深，只能一步一步去探索。其中字符串匹配替换是经常需要用到的。下面举个例子。
2.例子。
实现首尾字符串变色。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <script type="text/javascript"> //需要匹配的字符串 var content="few相,相fje相fjeiwow息iwow息息.fewwfew相,相fje相fjeiwow息iwow息息.fewwfew相,相fje相fjeiwow息iwow息息.fewwfew相,相fje相fjeiwow息iwow息息.fewwfew相,相fje相fjeiwow息iwow息息.feww"; /* * 方法用途 :匹配的方法，实现将所有满足条件的，首尾相间两个字符串v1和v2变红色，中间的串不变,并将改变的字符串嵌入div里面 * 例子 :如"kk相bb息",被替换后变为"kk相bb息","相"和"息"都变成红色 * v1:要匹配的开始的字符串 * v2:要匹配的结束的字符串 **/ function gl(v1,v2){ content=document.getElementById("test").value; v1=document.getElementById("test1").value; v2=document.getElementById("test2").value; //将两个字符串的正则表达式进行组装，三个括号代表三个需要匹配的地方 var strk="(\s*)"+"(\\"+v1+"+)"+"*(\\"+v2+"+)\*"; //进行全局多次匹配 var reg=new RegExp(strk,"gmi"); //分别将匹配的第二个和第三个参数变红色 var rep=content.replace(reg,"$1<font color=\"red\">$2</font><font color=\"red\">$3</font>"); //将结果嵌入div,以便让我们看到 document.getElementById("test3").innerHTML=rep; } </script> 请输入:要过滤的字符串: <input id="test" value="few相,相fje相fjeiwow息iwo" size="300" /><br/> 请输入首字符串:<input id="test1" value="相" size="300" /><br/> 请输入 尾字符串: <input id="test2" value="息" size="300" /><br/> <button id="testB" onclick="gl('相','息')">过滤</button><br/> <div id="test3">feww</div><br/> </body></html>实现根据数组进行过滤:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <script type="text/javascript"> //需要匹配的字符串 var content="few相,相fje相fjeiwow息iwow息息.fewwfew相,相fje相fjeiwow息iwow息息.fewwfew相,相fje相fjeiwow息iwow息息.fewwfew相,相fje相fjeiwow息iwow息息.fewwfew相,相fje相fjeiwow息iwow息息.feww"; var array=['电影','B样','发票','炒蛋']; function guolv(){ var content=document.getElementById("test").value; for(var i=0;i<4;i++){ var keyword=array[i]; var strk="("+keyword+"+)"; var reg=new RegExp(strk,"gmi"); var result=content.replace(reg,"<font color=\"red\">$1</font>"); content=result; } //将结果嵌入div,以便让我们看到 document.getElementById("test3").innerHTML=content; } </script> 请输入:要过滤的字符串: <input id="test" value="'电影','B样#$%&fwefew电影电影wfe,'发票','炒蛋'" size="300" /><br/> <br/> (1)过滤简单的<br/> <button id="testB" onclick="guolv()">过滤</button><br/> <div id="test3">feww</div><br/> <br/> </body></html>