前端文字按要求变底色

开发过程中需要对指定的一段文字特殊处理，如 “8月4日-8月7日共发生问题10条，其中三类问题10条 （A专业10条，B专业0条，C专业0条，D专业0条）。 己解决0条（A专业10条，B专业0条，C专业0条，D专业0条），未解决0条，解决率100%。”

需要变为如下效果

8月4日-8月7日共发生问题0条，其中三类问题10条 （A专业10条，B专业0条，C专业0条，D专业0条）。 己解决10条（A专业10条，B专业0条，C专业0条，D专业0条），未解决10条，解决率100%。

分析发现只有括号外的文字需要加背景，且符号和部分文字不需要加背景，

主要参考代码如下

登录后复制

  ....
  <div style="margin-left: 20px;margin-right: 20px;font-size: 25px;text-indent: 2ch;font-weight: normal;" v-html="formData.dayDetail"></div> 
 
 ...
  this_.formData.dayDetail = this.highlightText(this.formData.dayDetail)
  ...
 
 highlightText (text) {
      let html = '';
      let insideBrackets = false;
      for (var i = 0; i < text.length; i++) {
        var char = text[i];
        if (char === '（') {
          insideBrackets = true;
          html += char; // 直接添加括号字符，不应用样式
        } else if (char === '）') {
          insideBrackets = false;
          html += char; // 同样直接添加括号字符
        } else {
          // 如果不在括号内，则添加带背景颜色的<span>元素
          if (char === '其' || char === '中' || char === '，' || char === '。' || char === ',' || char === '.') { // 去除符号和部分汉字
            html += char; // 同样直接添加括号字符
          } else if (!insideBrackets) {
            html += '<span style="background: orange;color: #fff;">' + char + '</span>';
          } else {
            // 如果在括号内，则直接添加字符
            html += char;
          }
        }
      }
      return html;
    },

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.

原创作者: u_15266301 转载于: https://blog.51cto.com/u_15266301/11693754