Creo que tu enfoque actual está bien. Tiene la opción de usar .replace() también con una expresión regular:

 const title = "This is a title"; const boldTitle = title.replace(/^[^\s]+/, "<strong>$&</strong>"); console.log(boldTitle); document.body.innerHTML = boldTitle;

Aquí, la expresión regular coincide con los caracteres que no son espacios en blanco ( [^\s]+ ) desde el comienzo de la cadena ( ^ ) hasta que llega a un carácter de espacio en blanco ( \s ). Esta coincidencia luego se usa en el reemplazo (se hace referencia usando $& )

Su enfoque es bueno, a continuación hay otro enfoque que usa Regex

 var title = "Hello to new StackOverflow"; title = title.replace(/^(\w+)/, '<strong>$1</strong>'); console.log(title); 

 var title = "Hello to new StackOverflow"; title = title.replace(/^(\w+)/, '<strong>$1</strong>'); console.log(title);

Dado que está utilizando React, es posible que deba usar dangerouslySetInnerHTML SetInnerHTML para representar el html.

Entonces, otro enfoque sería algo como esto en React.

 <div> { title.split(" ").map((word, index) => { return index === 0 ? <strong>{word}</strong> : ` ${word}`; }); } </div>

Yo usaría una clase CSS. La asignación de desestructuración puede ayudar a definir las palabras, y puede usar una cadena de plantilla para devolver el resultado.

 function embolden(str) { const [ first, ...rest ] = str.split(' '); return `<span class="bold">${first}</span> ${rest.join(' ')}`; } const title = 'Javascript Modify First Word'; document.body.innerHTML = embolden(title);

 .bold { font-weight: 700; }