正则表达式替换span标签、p标签、img地址
2019-03-29 本文已影响0人
倘浩洋
// 1:去掉字符串的左空格
var str = ' 123'
str = str.replace(/(^\s*)/g, "") // '123'
// 2:去掉字符串的右空格
var str = '123 '
str = str.replace(/(\s*$)/g, "") // '123'
// 3:去掉字符串的左右空格
var str = ' 123 '
str = str.replace(/(^\s*)|(\s*$)/g, "") // '123'
// 4:去掉字符串的所有空格
var str = ' 1 23 '
str = str.replace(/ /g,'') // '123'
// 5:去掉字符串的所有加号、减号、空格
var str = ' 1 + - 23 '
str = str.replace(/\+|\-| /g,'') // '123'
// 6:验证手机号是否符合规范
var reg =/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/
reg.test('手机号') //返回true || false
// 7、替换span标签
var str1 = '<span>这里是内容区域</span>';
var str2 = str1.replace(/<span>([^<]*?)<\/span>/gi, '$1');
console.log(str2); //结果:这里是内容区域,如果span有style会失效,
//改进
var str1 = '<span style="font-family: 宋体;" class="class">这里是内容区域</span>';
var str2 = str1.replace(/<([a-zA-Z1-6]+)(\s*[^>]*)?>/g, "<$1>"); //结果:<span>这里是内容区域</span>
var str2 = str2.replace(/<span>([^<]*?)<\/span>/gi, '$1'); //结果:这里是内容区域,如果span标签没有任何style或者class等属性,可以省略上一步
console.log(str2);
//8、替换p标签
var str = '<p style="font-family: 宋体;">这里是内容</p>'
var str2 = str.replace(/<([a-zA-Z1-6]+)(\s*[^>]*)?>/g, "<$1>"); //结果:<p>这里是内容区域</p>
var str2 = str2.replace(/<p>([^<]*?)<\/p>/gi, '$1'); //结果:这里是内容区域,如果p标签没有任何style或者class等属性,可以省略上一步
console.log(str2);
//9、获取字符串中的src地址
var str = '<p><span><img title="title" alt="alt" src="http://www.baidu.com/1.jpg"/></span></p>这里是图片<p><span><img title="title" alt="alt" src="http://www.baidu.com/2.jpg"/></span></p>';
var arr = [];
str.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
arr.push(capture);
});
console.log(arr); //结果:["http://www.baidu.com/1.jpg", "http://www.baidu.com/2.jpg"]
//10、替换字符串中的style样式的px的单位
var str = '<div style="font-size:20px;width: 300px;height: 100PX;margin-top: 20px"></div>';
var reg = /(\d)+(px)/gi; //匹配结果['20px','300px','100PX','20px']
// var reg = /(\d)+[^(px)]/gi; //匹配结果['20','300','100','20']
var arr = str.match(reg);
for (let i = 0, len = arr.length; i < len; i++) {
str = str.replace(arr[i], parseFloat(arr[i]) + 'vw')
}
console.log(str) //'<div style="font-size:20vw;width: 300vw;height: 100vw;margin-top: 20vw"></div>'
//11、正则筛选字符串中的百分号
var str = 'strArr: 16.71%,19.72%,23.73%,28.61%,26.56%,27.61%,32.66%';
var reg = /[\d.]+[^%]/ig; //不带百分号:["16.71", "19.72", "23.73", "28.61", "26.56", "27.61", "32.66"]
// var reg = /[\d.]+%/ig; //带百分号:["16.71%", "19.72%", "23.73%", "28.61%", "26.56%", "27.61%", "32.66%"]
匹配结果处理方式一:直接过滤出来每项是字符串
var arr = str.match(reg);
console.log(arr) //["16.71", "19.72", "23.73", "28.61", "26.56", "27.61", "32.66"]
匹配结果处理方式二:使用replace过滤时转换各项为数字
var arr = []; //结果:["16.71", "19.72", "23.73", "28.61", "26.56", "27.61", "32.66"]
str.replace(reg,(a,b)=>{
arr.push(parseFloat(a)) //转换成数字:[16.71, 19.72, 23.73, 28.61, 26.56, 27.61, 32.66]
});
数组最大最小值求值方式一:arr各项为字符串类型的数字也行
var min = Math.min.apply(null, arr); //最小值
var max = Math.max.apply(null, arr); //最大值
数组最大最小值求值方式二:arr各项为字符串类型的数字也行,但是 arr[0]也是字符串类型
arr.sort(function (a, b) { //排序:[16.71, 19.72, 23.73, 26.56, 27.61, 28.61, 32.66]
return a-b;
});
var min = arr[0]; //最小值
var max = arr[arr.length - 1]; //最大值