Tengo el siguiente jQuery que funciona principalmente:
$("article > p, article > div, article > ol > li, article > ul > li").contents().each(function() { if (this.nodeType === 3) { strippedValue = $.trim($(this).text()); doStuff(strippedValue); } if (this.nodeType === 1) { strippedValue = $.trim($(this).html()); doStuff(strippedValue); } })
Los problemas surgen cuando (dentro doStuff()
) trato de reemplazar las etiquetas HTML. Aquí hay una vista de mis elementos:
Y estoy tratando de reemplazar esas etiquetas <kbd>
así:
newStr = newStr.replace(/<kbd>/g, " <b>"); newStr = newStr.replace(/<\/kbd>/g, "<b> ");
Eso no funciona, y estoy viendo en el depurador que las etiquetas <kbd>
se ven como elementos secundarios de primera clase y se repiten por separado. Mientras que quiero que todo dentro de mis selectores se vea como una cadena sin procesar para poder reemplazar las cosas. Y me doy cuenta de que estoy pidiendo una contradicción, porque .contents()
significa obtener niños y sus contenidos. Entonces, si tengo un selector que es un padre directo de <kbd>
, entonces <kdb>
deja de convertirse en una cadena sin procesar y se convierte en un nodo que se repite.
Así que parece que mis selectores están equivocados, PERO cada vez que trato de subir mis selectores en la jerarquía, inmediatamente pierdo contenido textual y termino con un montón de html sin contenido dentro de los elementos. (La captura de pantalla muestra buenos contenidos, como se esperaba).
Entonces, por ejemplo, probé esto:
$("article").contents().each(function() { ... }
... con la esperanza de que el bucle del selector ocurra un poco más arriba y, por lo tanto, permita que las etiquetas HTML más abajo aparezcan como texto sin formato. Pero claramente estoy perdido.
Mi objetivo es simplemente realizar un montón de reemplazos de cadenas en el contenido del html. Pero hay dos desafíos con esto:
body
, termina sin gran parte del contenido textual. Los selectores que tengo actualmente no sufren de ese problema; esos obtienen todo lo que quiero, PERO luego los elementos HTML/XML se repiten en bucle en lugar de aparecer como texto sin formato para que pueda realizar reemplazos.¿Por qué necesita realizar la modificación en HTML sin formato? Simplemente podría reemplazar los elementos DOM directamente (sin mencionar que esto es mucho más confiable que usar el reemplazo de cadenas):
$('kbd').replaceWith(function() { return ` <b>${this.textContent}</b> `; // or directly create DOM elements: // const b = document.createElement('b'); // b.textContent = this.textContent; // return b; }); console.log($('b').length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <kbd>hello world</kbd>
Por supuesto, aún puede hacer reemplazos de cadenas donde tenga sentido, pero debe trabajar con elementos DOM tanto como sea posible.