Javascript 在结果VueJS中将搜索到的字符/单词加粗

我目前正在VueJS中创建搜索框。 现在我的问题是如何使搜索结果中的字母加粗

这是我现在拥有的代码的一部分：

<div v-for="result in searchResults.merk" :key="result.uid">
        <inertia-link :href="result.url">
            <strong v-if="result.name.toLowerCase().includes(searchInput.toLowerCase())">{{result.name}}</strong>
            <span v-else>{{result.name}}</span>
        </inertia-link>
    </div>

{{result.name}
{{result.name}

---

这是我想要的，但不是真的，现在如果它包含这些字母，整个单词就变得粗体了。我只想给那些特定的字母加粗体，剩下的是单词的普通样式。

您可以尝试将单词拆分为一组串联跨距

因此，首先要对结果进行迭代。然后迭代

result.name

的每个字母，将每个字母放在自己的范围内

最后，使用对象类语法在垃圾邮件上切换一个粗体类

考虑以下示例：

<span 
    v-for="letter in result.name.toLowerCase()" 
    :key="letter" 
    :class={ isBold: searchInput.toLowerCase().includes(letter) }
>
{{letter}}
</span>

{{字母}}

如果类名右侧的条件为true，则类的对象语法将打开或关闭该类

这不是一个理想的解决方案，因为它包含合理的计算复杂度（2倍小写，并搜索每个字母的搜索字符串）。然而，这个用例非常简单，所以现代设备不应该费劲

---

如果您觉得它值得优化，您可以对输入进行去盎司处理并生成不同字母的映射小写搜索字母，然后搜索该映射，因为映射访问是一个O（1）操作。

请参见下面的示例。它包含两种解决方案

非常简单，但在使用时有很大的警告<出于安全原因，code>v-html不应与用户输入一起使用（请参见链接）。幸运的是，在这种情况下，若用户在搜索框中输入一些html，那个么只有当它也包含在搜索文本中时，才会呈现它。所以，如果搜索的文本（示例中的源代码）是安全的（由受信任的源代码生成），则完全可以保存

第二个解决方案是一点点涉及-简单地将文本分割成多个部分，并标记应该突出显示的部分

const vm=new Vue({
el:“#应用程序”，
数据（）{
返回{
资料来源：“foo bar baz baba”，
搜索：“ba”，
}
},
计算：{
格式化HTML（）{
const regexp=new regexp（this.search，“ig”）
const highlights=this.source.replace（regexp，$&）
返回`${highlights}`
},
亮点（）{
常量结果=[]
if（this.search&&this.search.length>0）{
const regexp=new regexp（this.search，“ig”）
让我们开始=0
for（让这个.source.matchAll（regexp）匹配）{
结果：推({
text:this.source.substring（start，match.index），
匹配：false
})
start=match.index
结果：推({
text:this.source.substr（开始，this.search.length），
匹配：正确
})
start+=this.search.length
}
if（开始<此.source.length）
push（{text:this.source.substring（start），match:false}）
}
如果（results.length==0）{
结果：推({
text:this.source，
匹配：false
})
}
返回结果
}
}
})

以HTML格式显示：
安全：
{{result.text}
{{result.text}

我真的不明白这是怎么一个答案。如果我搜索“abc”，我只想突出显示“abc”序列，而不是每次出现“a”、“b”和“c”字符……是的，你可能是对的。老实说，你的回答很好@MichalLevý但是OP接受我的答案是有原因的。显然，他们发现这很有帮助，至少可能是一个起点。我不相信他写了“搜索信件”，这对我来说意味着每一封信