js 正则表达式的应用

处理HTML字符串

1. HTML标签查找

如下方的一段html代码，我们需要从中判断查找对应的字符串

<p onclick="create();" >sadasdsadsa</p><p id="a" ></p>

相关查找代码如下：

var str = "<p οnclick=\"create();\" >sadasdsadsa</p><p id=\"a\" ></p>";
var e = str.search(/<[^<>]+>/);//search用于检索匹配正则的字符串的起始位置e结果为0
console.log(e);//输出结果为 0 
var n = str.replace(/<p[^<>]+>[^<>]+<\/p>/g,"");//replace用于替换某些字符或者与正则匹配的字符串，此处将第一个p标签替换为空,返回替换后的结果，不更改原来的字符串
console.log(n);//输出结果为 <p id="a" ></p>
var zz = /<p[^<>]+>[^<>]+<\/p>/; //定义一个正则表达式
console.log(zz.test(str));//test方法用于提前写好定义的正则表达式，来监测当前str中是否存在匹配正则表达式的字符串，若存在则返回true，不存在则返回false； 常用于参数判断
var arr = zz.exec(str);//exec方法用于将匹配的字符串以数组的形式返回 
console.log(arr[0]);//输出结果为 <p οnclick="create();" >sadasdsadsa</p>

[^<>] +的作用是非“<“或”>”字符任意个数任何字符；
search用于检索匹配正则的字符串的起始位置
replace用于替换某些字符或者与正则匹配的字符串，返回替换后的结果，不更改原来的字符串
test方法用于提前写好定义的正则表达式，来监测当前str中是否存在匹配正则表达式的字符串，若存在则返回true，不存在则返回false；
exec方法用于提前写好定义的正则表达式，来查找匹配的字符串并返回结果数组，若未找到则返回null

2.HTML属性

依然使用之前的字符串，查找对应的属性并替换

var n2 =str.replace("οnclick=\"create();\"","id=\"abc\""); //这里没有使用正则而是直接的字符串替换 如果不知内容时 下面使用正则的
var n3 = str.replace(/οnclick="[^"]+"/g,"οnclick=\"a(this);\"");//这里使用正则的方式替换对应的方法 
console.log(n3);//输出结果为<p οnclick="a(this);" >sadasdsadsa</p><p id="a" ></p>

示例中替换的是点击事件，同样也可以用于属性的替换，但是需要注意的是如果html中存在大量的相同属性名时，最好的方式是先找到需要修改的标签，单独针对这个标签然后再进行局部的替换；如果是需要大量的替换则在正则的/***/后面加一个g(标识的全局匹配，匹配所有)，i为大小写不敏感，m为多行匹配

3.a标签获取地址与参数并转为json数据

1. 示例url?a=1&b=2

以下的方式目前仅针对已知参数名称的一些a标签来使用，以及不会出现参数缺省的情况，如果出现参数缺省 还需要增加一些其他的处理方式，后续会补充在下方

var str = '<p><a href="/m/b/2_16_1.html?type=load&wid=801f0638edc2bb33b74ea89c75a9478f&ccid=a1cb4ed391696595121456451a339a90" style="color: #0085ef;">查看详情</a></p>';
var arr1 = /href="[^"“]+"/.exec(str);
//arr1[0] 得到第一个匹配结果 为href="/m/b/2_16_1.html?type=load&wid=801f0638edc2b…9c75a9478f&ccid=a1cb4ed391696595121456451a339a90"
//然后针对arr1[0]做处理
var str2 = arr1[0].replace(/href="/g,"\"url=").replace(/\?/g,"&");
//str2 "url=/m/b/2_16_1.html&type=load&wid=801f0638edc2bb33b74ea89c75a9478f&ccid=a1cb4ed391696595121456451a339a90"  左右均带着"
str2 = "{"+str2+"}"; //前后增加大括号
var jsonstr = str2.replace(/=/g,"\":\"").replace(/&/g,"\",\"");//结果：{"url":"/m/b/2_16_1.html","type":"load","wid":"801f0638edc2bb33b74ea89c75a9478f","ccid":"a1cb4ed391696595121456451a339a90"}
var jsonObj = JSON.parse(jsonstr);//即可成功转为json格式

2.示例m/test/xxx1/xxx2

var str = "http://xxx.com/test/shipin/1/fast/a";
var arr1 = /test\/shipin\/(.*)\/(.*)\/(.*)/.exec(str);
JSON.stringify(arr1);
//"["test/shipin/1/fast/a","1","fast","a"]"