用正则表达式修改替换标签的办法和代码

        // 正则把div标签换成p标签 显示图片
        this.chapterContent = res.data.chapterContent
          .replace(/div/g, 'p')
          // 下面四个有小问题！！！
          .replace(
            /<span style="font-weight: bold;">(.*?)<\/span>/g,
            '<strong>$1</strong>'
          )
          .replace(
            /<span style="font-style: italic;">(.*?)<\/span>/g,
            '<em>$1</em>'
          )
          .replace(
            /<span style="text-decoration-line: underline;">(.*?)<\/span>/g,
            '<u>$1</u>'
          )
          .replace(
            /<span style="text-decoration-line: line-through;">(.*?)<\/span>/g,
            '<s>$1</s>'
          )
        console.log(this.chapterContent, 'res的主要内容-----')

---

常用的正则表达式-部分

// 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];   //最大值