Estoy configurando una API para enviar un correo electrónico utilizando el contenido de una publicación como cuerpo del correo electrónico. El editor de texto utilizado para la publicación guarda el texto en HTML, por lo que necesitaba convertir el resultado en texto sin formato. Hay otras dudas que me han dado solución, pero me gustaría mantener del texto original el texto en negrita, cursiva y los enlaces. Así que esto es lo que tengo:
Este es un texto en negrita.
Este es un texto normal.
Esto es cursiva.
Este es un enlace.
Luego en el script tengo la siguiente función:
function htmlToText(html){ //remove code brakes and tabs html = html.replace(/\n/g, ""); html = html.replace(/\t/g, ""); //keep html brakes and tabs html = html.replace(/<\/td>/g, "\t"); html = html.replace(/<\/table>/g, "\n"); html = html.replace(/<\/tr>/g, "\n"); html = html.replace(/<\/p>/g, "\n"); html = html.replace(/<\/div>/g, "\n"); html = html.replace(/<\/h>/g, "\n"); html = html.replace(/<br>/g, "\n"); html = html.replace(/<br( )*\/>/g, "\n"); html = html.replace(/<a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 (Link->$1) "); //parse html into text var dom = (new DOMParser()).parseFromString('<!doctype html><body>' + html, 'text/html'); return dom.body.textContent; }Eso me da un texto sin formato con buenos saltos de línea, pero me preguntaba si podría obtener la negrita, la cursiva y los enlaces.
Gracias.
Tuve algo de tiempo en mis manos y jugué. Esto es lo que se me ocurrió:
const copy=document.createElement("div"); copy.innerHTML=container.innerHTML.replace(/\n/g," ").replace(/[\t\n]+/g,""); const tags={B:["**","**",1], // [<prefix>, <postfix>, <sequence-number> ] I:["*","*",2], H2:["##","\n",3], P:["\n","\n",4], DIV:["","\n",5], TD:["","\t",6]}; [...copy.querySelectorAll(Object.keys(tags).join(","))] .sort((a,b)=>tags[a.tagName][2]-tags[b.tagName][2]) .forEach(e=>{ const [a,b]=tags[e.tagName]; e.innerHTML=(e.matches("TD:first-child") ? "\n": a) + e.innerHTML + b; }); console.log(copy.textContent.replace(/^ */mg,"")); <div id="container"> <H2>Second level heading</H2> <div><div> A <b>first div</b> with a <a href="abc.html">link (abc)</a> and a <p>paragraph having itself another <a href="def.html">link (def)</a> in it.</p> </div> </div> And here is some more <i>"lost" text</i> ... <table> <tr><td>one</td><td><b>two</b></td><td>three</td></tr> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>d</td><td>e</td><td>f</td></tr> </table> </div> En lugar de usar expresiones regulares para "analizar" el html, elegí tratarlo de manera DOM: creo un nuevo elemento div ( copy ) en el que inserto el .innerHTML original. Para tipos de elementos particulares, luego defino algunos prefijos y postfijos que deben rodear el .innerHTML original. Estos se almacenan en tags y se aplican en el elemento div recién creado.
Esto se hace seleccionando todos los elementos "especiales" (según lo especificado por las tags -keys) y procesándolos en un orden secuencial dado. Luego simplemente devuelvo el .textContent del elemento de copy modificado.
El texto sin formato realmente no puede representar la decoración de texto en negrita o cursiva. Por esta razón, utilicé modificadores en el estilo Markdown (*: cursiva, **: negrita)