Vue中v-html如何避免渲染HTML标签并实现大小写不敏感高亮？

问题1：大小写敏感匹配 #

使用正则表达式的i标志实现大小写不敏感匹配，同时必须对搜索词中的正则特殊字符（如.*+?^${}()|[]\）进行转义，避免出现正则语法错误。

问题2：HTML标签转义 #

先将原文本中的HTML特殊字符转义为实体（比如<转成<），确保v-html渲染时会显示标签文本而非实际渲染元素，之后再执行加粗替换逻辑。

完整代码实现 #

<template>
  <p v-html="boldText(rawText)"></p>
</template>

<script setup>
import { ref } from 'vue'

const search = ref('hello')
const rawText = ref('<div>Hello, World! hello there</div>')

// 转义HTML特殊字符
function escapeHtml(text) {
  return text
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;')
}

// 转义正则特殊字符
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
}

function boldText(text) {
  if (!search.value.trim()) return escapeHtml(text)
  
  const escapedSearch = escapeRegExp(search.value)
  // 创建大小写不敏感的全局正则（g标志匹配所有出现的内容）
  const regex = new RegExp(escapedSearch, 'gi')
  
  // 先转义原文本，再替换匹配内容，保留原大小写
  return escapeHtml(text).replace(regex, match => `<b>${match}</b>`)
}
</script>

代码说明 #

1. escapeHtml函数：将文本中的HTML特殊字符转为实体，确保<div>这类标签会以纯文本形式显示，而非被浏览器渲染为实际元素。
2. escapeRegExp函数：处理搜索词中的正则特殊字符，比如用户搜索hello.时，不会被当作正则通配符处理。
3. boldText函数：
   • 若搜索词为空，直接返回转义后的文本
   • 创建带gi标志的正则（g全局匹配，i大小写不敏感）
   • 用replace的回调函数，保留原文本的匹配内容大小写，包裹<b>标签实现加粗

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