Каков наиболее удобный способ преобразования HTML в простой текст с сохранением разрывов строк (с помощью JavaScript)? - PullRequest
Новая
       14

Каков наиболее удобный способ преобразования HTML в простой текст с сохранением разрывов строк (с помощью JavaScript)?

12 голосов
/ 28 сентября 2010

По сути, мне просто нужен эффект копирования этого HTML из окна браузера и вставки его в элемент textarea.

Например, я хочу это: 

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

чтобы стать таким: 

Some
text
Some
text

Ответы [ 5 ]

17 голосов
/ 28 сентября 2010

Если этот HTML виден на вашей веб-странице, вы можете сделать это с помощью выбора пользователя (или просто TextRange в IE). Это сохраняет разрывы строк, если не обязательно перед и после пробела.

ОБНОВЛЕНИЕ 10 декабря 2012

Однако метод toString() объектов Selection еще не стандартизирован и работает несовместимо между браузерами, поэтому этот подход основан на шаткой основе и Я не рекомендую использовать Теперь . Я бы удалил этот ответ, если бы он не был принят.

Демо: http://jsfiddle.net/wv49v/

Код: 

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;
}
4 голосов
/ 28 сентября 2010

Я пытался найти некоторый код, который я написал для этого некоторое время назад, который я использовал. Это работало хорошо. Позвольте мне описать, что он сделал, и, надеюсь, вы сможете повторить его поведение.

  • Заменить изображения альтернативным текстом или текстом заголовка.
  • Заменить ссылки на "текст [ссылка]"
  • Заменить вещи, которые обычно создают вертикальное пустое пространство. h1-h6, div, p, br, hr и т. д. (Я знаю, я знаю. На самом деле это могут быть встроенные элементы, но это хорошо работает.)
  • Удалите остальные теги и замените их пустой строкой.

Вы можете даже расширить это, чтобы отформатировать такие вещи, как упорядоченные и неупорядоченные списки. Это действительно зависит от того, как далеко вы захотите зайти.

EDIT

Нашел код! 

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;
}
2 голосов
/ 12 июня 2018

Я сделал функцию на основе этого ответа: 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;
}
1 голос
/ 05 марта 2019

Основываясь на ответе chrmcpn , мне пришлось преобразовать базовый HTML-шаблон электронной почты в текстовую версию как часть сценария сборки в node.js .Мне пришлось использовать JSDOM , чтобы заставить его работать, но вот мой код: 

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;
}
0 голосов
/ 28 сентября 2010

Три шага.

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 "".
...