¿Hay alguna forma de simplificar la cadena HTML? Como eliminar todas las etiquetas redundantes de la cadena.
Por ejemplo:
HTML fuente:
<div><span><span>1</span></span><span>2</span></div>Rendimiento esperado:
<div><span>12</span></div>(o incluso menos)
<div>12</div> Conozco algunas bibliotecas como quilljs que pueden hacer esto, pero es una biblioteca enorme, algo exagerada para mi caso.
también, https://github.com/htacg/tidy-html5 es lo que quiero, pero no tiene una versión js
Puedes intentar usar el DOMParser:
let s = `<div><span><span>1</span></span><span>2</span></div>` let d = new DOMParser() let doc = d.parseFromString(s, 'application/xml') let tag = doc.children[0].tagName let text = doc.children[0].textContent let result = `<${tag}>${text}</${tag}>` console.log(result)Consulte el siguiente código, puede ayudarlo a ir más allá.
var childs = document.querySelectorAll("div#parent") var tmpTexts = [] for (const c of childs) { if (tmpTexts.includes(c.innerText)) continue tmpTexts.push((c.innerText).trim()) c.parentNode.removeChild(c) } tmpTextArr = tmpTexts[0].split('\n'); console.log(tmpTextArr); const para = document.createElement("div"); tmpTextArr.forEach(function(text) { var node = document.createElement("div"); var nodeTxt = document.createTextNode(text); node.appendChild(nodeTxt); para.appendChild(node) }); document.body.appendChild(para);https://jsfiddle.net/Frangly/pnLgr8ym/66/
En tmpTexts, para cada línea nueva, debe agregar una etiqueta div.
Cree un nuevo Elemento e itere la matriz tmpTexts y una etiqueta div usando innerHTML