¿Cuál es la forma más conveniente para convertir HTML a texto sin formato preservando al mismo tiempo los saltos de línea (con JavaScript)?

StackOverflow https://stackoverflow.com/questions/3813167

  •  26-09-2019
  •  | 
  •  

Pregunta

Básicamente sólo tiene el efecto de que la copia de la ventana del navegador HTML y pegarlo en un elemento de área de texto.

Por ejemplo, yo quiero esto: 

<p>Some</p>
<div>text<br />Some</div>
<div>text</div>

a ser la siguiente: 

Some
text
Some
text
¿Fue útil?

Solución

Si que HTML es visible dentro de su página web, usted podría hacerlo con la selección del usuario (o simplemente un TextRange en IE). Esto preservar saltos de línea, aunque no necesariamente ataque y de salida espacio en blanco.

Actualización 10 de diciembre de 2012

Sin embargo, el método toString() de Selection objetos es aún no estandarizada y funcionan de manera inconsistente entre los navegadores, por lo que este enfoque se basa en un terreno inestable y no recomiendo usarlo ahora . Me gustaría eliminar esta respuesta si no se aceptó.

Demostración: http://jsfiddle.net/wv49v/

Código: 

function getInnerText(el) {
    var sel, range, innerText = "";
    if (typeof document.selection != "undefined" && typeof document.body.createTextRange != "undefined") {
        range = document.body.createTextRange();
        range.moveToElementText(el);
        innerText = range.text;
    } else if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
        sel = window.getSelection();
        sel.selectAllChildren(el);
        innerText = "" + sel;
        sel.removeAllRanges();
    }
    return innerText;
}

Otros consejos

He intentado encontrar algo de código que escribí para este hace un tiempo que he utilizado. Funcionó muy bien. Permítanme exponer lo que hizo, y es de esperar que podría duplicar su comportamiento.

  • Reemplazar imágenes con alt o título de texto.
  • Reemplazar vínculos con el "texto [link]"
  • Reemplazar las cosas que por lo general producen un espacio en blanco vertical. h1-h6, div, p, a, h, etc (lo sé, lo sé. Estas son las que podrían ser los elementos en línea, pero funciona bien.)
  • Gaza a cabo el resto de las etiquetas y reemplazar con una cadena vacía.

Incluso podría ampliar este formato más para cosas como listas ordenadas y desordenadas. Realmente sólo depende de lo lejos que querrá ir.

Editar

Encontrado el código! 

public static string Convert(string template)
{
    template = Regex.Replace(template, "<img .*?alt=[\"']?([^\"']*)[\"']?.*?/?>", "$1"); /* Use image alt text. */
    template = Regex.Replace(template, "<a .*?href=[\"']?([^\"']*)[\"']?.*?>(.*)</a>", "$2 [$1]"); /* Convert links to something useful */
    template = Regex.Replace(template, "<(/p|/div|/h\\d|br)\\w?/?>", "\n"); /* Let's try to keep vertical whitespace intact. */
    template = Regex.Replace(template, "<[A-Za-z/][^<>]*>", ""); /* Remove the rest of the tags. */

    return template;
}

Hice una función basada en esta respuesta: https://stackoverflow.com/a/42254787/3626940 

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");

    //parse html into text
    var dom = (new DOMParser()).parseFromString('<!doctype html><body>' + html, 'text/html');
    return dom.body.textContent;
}

chrmcpn respuesta, que tenía que convertir una plantilla básica de correo electrónico HTML en una versión en texto plano como parte de una script de construcción en Node.js . Tuve que usar JSDOM para hacer que funcione, pero aquí está mi código: 

const htmlToText = (html) => {
    html = html.replace(/\n/g, "");
    html = html.replace(/\t/g, "");

    html = html.replace(/<\/p>/g, "\n\n");
    html = html.replace(/<\/h1>/g, "\n\n");
    html = html.replace(/<br>/g, "\n");
    html = html.replace(/<br( )*\/>/g, "\n");

    const dom = new JSDOM(html);
    let text = dom.window.document.body.textContent;

    text = text.replace(/  /g, "");
    text = text.replace(/\n /g, "\n");
    text = text.trim();
    return text;
}

tres pasos. 

First get the html as a string.
Second, replace all <BR /> and <BR> with \r\n.
Third, use the regular expression "<(.|\n)*?>" to replace all markup with "".
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top