正则表达式替换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];   //最大值 



上一篇下一篇

猜你喜欢

热点阅读