<div style={{ color: "white" }} dangerouslySetInnerHTML={{ __html: `text <i style="color: red" >some data </i> not interesting`, }} />Así que esta es una forma de convertir una cadena en un elemento html.
Eso no es lo que estoy tratando de hacer porque es peligroso.
Por ejemplo, quiero poder colorear todas las instancias de la palabra "diablo" en rojo en una cadena que se muestra en un div.
¿Cómo se puede hacer esto sin convertir el texto en un elemento html?
Puede usar el método de replace para resaltar una palabra específica junto con el atributo global g para reemplazar todas las palabras
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>Si desea apegarse a React (sin modificar directamente el DOM), puede iterar sobre cada palabra/token y reemplazar la palabra diablo con <span className="devil">devil<span> pero esto se complica con la puntuación, etc. aunque es un comienzo. Creo que la solución de @Rana es probablemente la mejor para lo que está buscando hacer.
<div style={{ color: "white" }}>{ textblockyouprovide.split(" ").map(word=>word=="devil"?<span className="devil">word</span>:word) }</div>