我只想把匹配的字符串加粗。比如,我有一个字符串"Hello,World!",用户搜索了"hello"。我想把这样的东西,"Hello,World!"。
我试过了,
const search = ref('hello')
function boldText(text) {
return text.replace(search.value, `<b>${search.value}</b>`)
}
<p v-html="boldText('Hello, World!')"></p>
但问题是它是大小写敏感的,如果我的字符串包含html标签,它会呈现,如果我的字符串是<div>Hello, World</div>
,它不会显示div标签,因为我使用的是v-html
。
有没有办法解决这两个问题?
3条答案
按热度按时间dxxyhpgq1#
您可以尝试以下代码片段::
0vvn1miw2#
如果可以的话,请尽量避免使用
v-html
,而使用渲染函数。这是我会创建一个单独的组件来做的事情。使用插槽允许您定制如何标记匹配的文本和设置样式,而不是硬编码
<b>
标记。dgiusagp3#
我找到了一个简单的解决方案。这可能不是最佳实践或安全。无论如何,我修改了boldText函数,类似于,