美文网首页
正则表达式替换span标签、p标签、img地址

正则表达式替换span标签、p标签、img地址

作者: 倘浩洋 | 来源:发表于2019-03-29 11:50 被阅读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];   //最大值 
    
    
    
    

    相关文章

      网友评论

          本文标题:正则表达式替换span标签、p标签、img地址

          本文链接:https://www.haomeiwen.com/subject/rpflbqtx.html