js正则表达式-依据首尾字符串做匹配替换
日期：2014-05-16 浏览次数：20458 次
js正则表达式-根据首尾字符串做匹配替换
1.前言.
js正则表达式博大精深，只能一步一步去探索。其中字符串匹配替换是经常需要用到的。下面举个例子。
2.例子。
实现首尾字符串变色。
实现根据数组进行过滤:
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
