Quiero reemplazar una subcadena en un texto entre dos índices. Pero quiero ignorar cualquier etiqueta HTML al contar el índice.
Por ejemplo
Si el texto es el mejor cuchillo de cocina , quiero reemplazar la subcadena del índice 4 al 8 con 'agradable' para que el resultado sea el buen cuchillo de cocina .
Pero si el texto está en una etiqueta HTML como <li>the best kitchen knife</li> o <li>the <span>best</span> kitchen knife</li> y los índices dados son 4 y 8, debería contar de 'el' no de <li> . Entonces, el resultado esperado debería ser <li>the <span>nice</span> kitchen knife</li>
Usé el siguiente código pero no funciona como esperaba.
function replaceBetween(origin, startIndex, endIndex, insertion) { return ( origin.substring(0, startIndex) + insertion + origin.substring(endIndex) ); }Uso:
replaceBetween("<li>the <span>best</span> kitchen knife</li>", 4, 8, "nice");Producción:
<li>nice<span>best</span> kitchen knife</li>Rendimiento esperado:
<li>The <span>nice</span> kitchen knife</li>Una solución es recuperar el .innerText de su li element . El valor devuelto no contendrá ninguna etiqueta html, por lo que puede manipular el texto según sea necesario. Si se necesitan las etiquetas eliminadas, deberá volver a colocarlas (modificando la cadena de texto para incluir etiquetas) y configurar el li element ' .innerHTML` a su cadena de texto (donde el navegador interpretará el texto como marcado html).
El resultado de la recuperación de .innerText se muestra en el registro del siguiente fragmento:
let txt = document.getElementsByTagName('li')[0].innerText; console.log(txt); <ul> <li>the <span style="color:red">best</span> kitchen knife</li> </ul>