Estoy tratando de reemplazar :: y ;; a
const text = 'Welcome :: my ;;'.replace('::', <Strong>to</Strong>).replace(';;', <Strong>world</Strong>);
Estoy recibiendo este Welcome [object Object] my [object Object].
Respuesta esperada Welcome **to** my **world**.
¿Puede alguien por favor ayudarme en eso?
Pregunta actualizada
Habrá un texto aleatorio como este:
Welcome :: my ;;Welcome ;; my ::Hello :: Y reemplace :: con valor dinámico suponga to solo y ;; con world de valor dinámico solamente.
Los elementos JSX son azúcar de sintaxis para los elementos React DOM, que son objetos. Una cadena por sí sola no llevará información sobre cosas como el tamaño o el peso de la fuente, por lo que puede ser mejor representarlo todo mediante JSX. Creo que algo en este sentido lo haría:
const text = 'Welcome :: my ;;'; const myWorld = ( <span> {text.split(' ').map((word, index) => { const space = index == 0 ? '' : ' '; if (word == '::') { return (<strong key={index}>{space + "to"}</strong>); } else if (word == ';;') { return (<strong key={index}>{space + "world"}</strong>); } return (<span key={index}>{space + word}</span>); }} </span> );Si necesita que los reemplazos sean dinámicos, puede crear una función para esto:
// Example `replacements` object: // { // '::': 'to', // ';;': 'world', // } function replaceWithEmphasis(text, replacements) { const words = text.split(' '); return ( <span> { words.map((word, index) => { const replaced = replacements[word]; // Preserve spaces between words const space = index == 0 ? '' : ' '; if (replaced != null) { return <strong key={index}>{space + replaced}</strong>; } else { return <span key={index}>{space + word}</span>; } }) } </span> ); }Puedes hacerlo así
const text = 'Welcome :: my ;;'.replace('::', '<strong>to</strong>').replace(';;', '<strong>world</strong>')y luego mostrarlo usando peligrosamenteSetInnerHTML
render() { return ( <div dangerouslySetInnerHTML={{ __html: text }} /> ); }