我試圖在可搜索的字符串數組中突出顯示匹配的子字符串。我認為我非常接近,只是最後一點不起作用。
我顯示一個字符串數組。當我輸入輸入時,數組中的子字符串應該<mark></mark>
在與輸入匹配時突出顯示(使用)。匹配工作正常,但我得到的[object Object]
不是突出顯示的文本。所以這是有問題的代碼的一部分(它位於.map()
方法內的 Jsx 中:
<div>
{item.matched.length > 0
? item.name.replace(new RegExp(inputText, 'gi'), (match) => (
<mark>{match}</mark>
))
: item.name}
</div>
的item
是陣列我映射的元件和具有兩個屬性:name
&matched
。matched
如果部分或全部name
匹配,則為空或包含鍵入的搜索模式。這就是我在文本框中輸入時得到的信息:
很明顯,搜索和匹配工作正常,看看我得到了什麼:[object Object]
而不是突出顯示的搜索模式。我試圖返回一個模板字符串,就像那個反<mark>${match}</mark>
引號 backquote,但這導致<mark>a</mark>
在我的示例中顯示。
所以我在這裡不知所措,任何建設性的反饋將不勝感激。
我們應該在 html 中呈現
<div dangerouslySetInnerHTML={{ __html: (item.matched.length > 0
? item.name.replace(new RegExp(inputText, 'gi'), (match) => {
return `<span>${match}</span>`
})
: item.name) }}>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句