做回显日志时,拿到的数据直接使用pre回显第一行出现多余空格

问题描述

例如：直接拿到数据使用pre标签,回显出现多余空格

解决方案：

写了一个方法把多余的空格去掉

html
<!-- data为处理过后的数据 -->
<code v-html="data"></code>

// val是拿到的需要回显的数据
toRightFormat(val) {
      const changeViewVal = val;
      const subStrTmp = changeViewVal.indexOf('\n', 0);
      const subStrTmp_2 = changeViewVal
        .substring(0, subStrTmp - 1)
        .match(/[\S]/); // 第一个非空格字符
      const subStrTmp_3 = changeViewVal
        .substring(0, subStrTmp - 1)
        .indexOf(subStrTmp_2); // 第一个非空格字符所在位置
      val = changeViewVal
        .substring(0, subStrTmp - 1)
        .substring(subStrTmp_3, subStrTmp); // 去掉<pre>前面空格后的第一行
      const lastStr = changeViewVal.substring(subStrTmp, changeViewVal.length); // 第一行后的所有内容
      val += '<br>';
      const tempStr = '<pre>' + lastStr + '</pre>'; // 如果不加一个<pre>在里面的话，+=操作会让后面的换行符变成空格。找寻了许多解决方案，最后都没有搞定。于是便使用这个了……
      val += tempStr;
      return val;
    },