JavaScript搜索过滤高亮功能替换后显示[object Object]问题求助

问题原因 #

1. 字符串拼接语法错误：你在拼接<mark>标签的代码中写了'<mark>'+{matches}+'</mark>'，这里给matches变量额外包裹了大括号，相当于创建了一个键为matches的新对象，字符串拼接时对象会被自动转为[object Object]，这就是你看到异常输出的直接原因。
2. HTML渲染逻辑错误：就算你修正了拼接语法，直接把包含HTML标签的字符串作为文本放到模板中渲染，前端框架（React/Vue等）默认会对内容做转义处理，防止XSS攻击，最终只会显示带<mark>标签的纯文本，不会渲染成高亮的标签效果。

修复方案 #

推荐用节点拆分的安全方式实现高亮，不需要拼接HTML字符串，避免XSS风险，参考代码如下：

this.countries.response.filter((val) => {
  const searchVal = this.controls.country.toLowerCase();
  return searchVal === "" || val.value.toLowerCase().includes(searchVal);
}).map((e) => {
  const searchVal = this.controls.country.toLowerCase();
  const regex = new RegExp(`(${searchVal})`, 'gi');
  // 拆分字符串为普通文本和匹配文本的数组
  const parts = e.value.split(regex);
  return (
    <li class="lov-val list-group-item">
      <p>
        {parts.map((part, index) => 
          part.toLowerCase() === searchVal ? <mark key={index}>{part}</mark> : part
        )}
      </p>
    </li>
  )
})

如果确实要使用HTML字符串渲染的方式，不同框架的处理方式如下：

• React：给标签加dangerouslySetInnerHTML属性：<p dangerouslySetInnerHTML={{__html: highlighted}}></p>
• Vue：给标签加v-html指令：<p v-html="highlighted"></p>
  注意：直接渲染HTML字符串存在XSS注入风险，非必要不推荐使用。

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