<div
style={{ color: "white" }}
dangerouslySetInnerHTML={{
__html: `text <i style="color: red" >some data </i> not interesting`,
}}
/>
So this is a way to convert string into html element.
That is not what I am trying to do because it is dangerous.
For example, I want to be able to color every instance of the word "devil" to red in a string displayed in a div.
How can this be done without converting the text into an html element?
You can use replace method to highlight specific word along with global attribute g to replace all words
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>If you want to stick to React (without directly modifying the DOM), you can iterate over each word/token and replace the word devil with <span className="devil">devil<span> but this gets tricky with punctuation etc. It is a start though. I think @Rana's solution is probably best for what you are looking to do.
<div style={{ color: "white" }}>{
textblockyouprovide.split(" ").map(word=>word=="devil"?<span className="devil">word</span>:word)
}</div>