<div
style={{ color: "white" }}
dangerouslySetInnerHTML={{
__html: `text <i style="color: red" >some data </i> not interesting`,
}}
/>
所以這是一種將字串轉換為 html 元素的方法。
這不是我想要做的，因為它很危險。
例如，我希望能夠在 div 中顯示的字串中將單詞“devil”的每個實體著色為紅色。
如何在不將文本轉換為 html 元素的情況下完成此操作？
uj5u.com熱心網友回復：
您可以使用replace方法突出顯示特定單詞以及全域屬性g來替換所有單詞
function highlight() {
var textHigh = document.getElementById("text")
textHigh.innerHTML = textHigh.innerHTML.replace(/ready/g, '<i style="color: red">ready</i>')
}
highlight();<div id="text">I am everready for every ready state to keep the work ready</div>uj5u.com熱心網友回復：
如果你想堅持使用 React（不直接修改 DOM），你可以迭代每個詞/標記并用這個詞替換“devil”，<span className="devil">devil<span>但這會用標點符號等變得棘手。雖然這是一個開始。我認為@Rana 的解決方案可能最適合您要做的事情。
<div style={{ color: "white" }}>{
textblockyouprovide.split(" ").map(word=>word=="devil"?<span className="devil">word</span>:word)
}</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/337322.html
標籤：javascript html css 反应 前端
上一篇：正文小于html