Esto se debe a que configuró el elemento principal (párrafo) para display: flex . Parte de lo que hace un flexbox es decidir cómo empaquetar los elementos secundarios y cuánto espacio agregar entre ellos.

Es casi seguro que es un error usar display: flex para un elemento que contiene directamente texto sin procesar. Por lo general, los flexboxes son elementos de envoltura que contienen bloques discretos de contenido.

Si elimina esta propiedad, permitiendo que el párrafo use su display: block , los espacios se conservarán como esperaba.

 function highlight(text) { const InputsTexts = document.querySelectorAll('.item-question-faq'); for (const inputText of InputsTexts) { let innerHTML = inputText.innerHTML; let index = innerHTML.toUpperCase().indexOf(text.toUpperCase()); if (index !== -1) { innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + '</span>' + innerHTML.substring(index + text.length); inputText.innerHTML = innerHTML; } } } document.body.onload = function() { highlight('order'); };

 .item-question-faq { margin-left: 5px; align-items: center; font-size: 14px; margin-left: 3px; margin-right: 3px; } .highlight { background: yellow; }

 <p class="item-question-faq webrep-faq" >the order is important</p>

consejo menor: puede usar forEach de javascript para hacer que su código sea un poco más conciso.

En vez de:

 const InputsTexts = document.querySelectorAll('.item-question-faq'); for (const inputText of InputsTexts) { /* do stuff */ }

Considerar:

 document.querySelectorAll('.item-question-faq').forEach((inputText) => { /* do stuff */ });