如何从v-html中获取未渲染标签与已渲染标签混合的文本

1. 文本预处理与核心逻辑实现 #

编写Vue实例方法，完成三个关键操作：给目标文本加末尾空格、高亮指定关键词、限制仅允许渲染特定HTML标签：

methods: {
  processEsText(rawText) {
    let processed = rawText;
    
    // 给"/Document..."格式的文本添加末尾空格
    processed = processed.replace(/("\/Document.*?")/g, '$1 ');
    
    // 高亮被''包裹的关键词，替换为红色span标签
    processed = processed.replace(/'([^']+)'/g, '<span style="color:red">$1</span>');
    
    // 仅保留用于高亮的span标签，其余HTML字符全部转义
    processed = this.escapeHtml(processed);
    processed = processed.replace(/&lt;span style=&quot;color:red&quot;&gt;([^&]+)&lt;\/span&gt;/g, '<span style="color:red">$1</span>');
    
    return processed;
  },
  escapeHtml(str) {
    return str.replace(/[&<>"']/g, match => {
      const escapeMap = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
      };
      return escapeMap[match];
    });
  }
}

2. 模板中调用渲染 #

在Vue模板里直接使用v-html调用处理方法：

<div v-html="processEsText(yourEsText)"></div>

逻辑说明 #

• 末尾空格：通过正则匹配目标格式文本，在其后追加空格
• 关键词高亮：将单引号包裹的内容替换为红色<span>标签
• 安全渲染：先转义所有HTML字符，再还原用于高亮的<span>标签，确保只有指定标签被解析，其余转义字符（如"）仅作为文本展示

内容的提问来源于stack exchange，提问作者Wendell