Vue中使用v-for渲染段落时如何为指定关键词添加加粗样式

你可以通过关键词正则匹配+v-html渲染的方式完成需求，具体修改如下： #

步骤1：新增关键词高亮处理函数 #

在Vue实例的methods中新增如下方法，支持忽略大小写匹配、保留原词大小写格式，同时通过单词边界避免误匹配包含关键词片段的其他单词：

methods: {
  highlightKeyword(sentence, keyword) {
    // 构造带单词边界、忽略大小写的匹配正则
    const reg = new RegExp(`\\b${keyword}\\b`, 'gi')
    // 将匹配到的关键词替换为加粗格式，$&保留原匹配内容的大小写
    return sentence.replace(reg, '<strong>$&</strong>')
  }
}

步骤2：修改模板渲染逻辑 #

把原来的纯文本插值渲染替换为v-html调用处理函数即可：

<div v-for="item in data.description" :key="item">
  <span v-html="highlightKeyword(item, 'frequencies')"></span>
</div>

注意事项 #

如果你的item内容来自用户自定义输入，使用v-html前需要先对内容做XSS过滤，避免注入恶意脚本。如果是后台可控的安全内容，直接使用即可。

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