Tengo innerHTML que se parece a esto:
<span class="test"> <span> </span> Hello I am here <span class="test1"> </span> </span>
Quiero eliminar todas las etiquetas de intervalo anidadas para obtener esto:
<span class="test"> Hello I am here </span>
Intenté usar .replace('', '').replace('', '') pero tendría que verificar el último intervalo de alguna manera y también podría haber diferentes intervalos que se están creando dinámicamente a partir de documentos de Google, por lo que sería sería mejor si pudiera hacer un reemplazo en todos los tramos que no sean el primero o el último tramo.
Prueba esto
$('.test').find('span').remove()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="test"> <span>dummy data </span> Hello I am here <span class="test1"> dummay data</span> </span>
Puede hacer esto configurando el textContent del tramo exterior en su propio textContent , porque leer el textContent de un elemento no devuelve ninguna etiqueta de marcado intercalada con el texto.
Restablecer textContent también evita que el analizador HTML analice el contenido del texto, como lo haría si se usara para establecer la propiedad innerHTML del elemento externo.
"use strict";
let testSpan = document.querySelector(".test");
testSpan.textContent = testSpan.textContent;
console.log( testSpan.outerHTML);
<span class="test"><span> </span> Hello I am here <span class="test1"> </span> </span>
Si quisiera, podría reemplazar los caracteres de espacio en blanco consecutivos con un solo carácter de espacio antes de volver a asignar textContent .
esto funcionará
"use strict";
const elm = document.querySelector(".test");
elm.innerHTML = elm.innerText;
console.log(elm.outerHTML);
<span class="test"><span> </span> Hello I am here <span class="test1"> </span> </span>