Убрать HTML из текстового JavaScript

Question

Есть ли простой способ взять строку html в JavaScript и убрать html?

Answer 1

Если вы работаете в браузере, то самый простой способ - просто позволить браузеру сделать это за вас ...

function strip(html)
{
   var tmp = document.createElement("DIV");
   tmp.innerHTML = html;
   return tmp.textContent || tmp.innerText || "";
}

Примечание: как отметили в комментариях люди, этого лучше избегать, если вы не контролируете источник HTML (например, не запускайте его на чем-либо, что могло бы быть получено из пользовательского ввода). Для этих сценариев вы можете по-прежнему позволить браузеру сделать всю работу за вас - см. Ответ Сабы об использовании теперь широко доступного DOMParser .

Answer 2

myString.replace(/<[^>]*>?/gm, '');

Answer 3

Самый простой способ:

jQuery(html).text();

Получает весь текст из строки html.

Answer 4

Я хотел бы поделиться отредактированной версией одобренного ответа Shog9 .

---

Как Майк Самуэль указал с комментарием, эта функция может выполнять встроенные коды JavaScript.
Но Shog9 прав, когда говорит "пусть браузер сделает это за вас ..."

так .. вот моя отредактированная версия, используя DOMParser :

function strip(html){
   var doc = new DOMParser().parseFromString(html, 'text/html');
   return doc.body.textContent || "";
}

вот код для проверки встроенного JavaScript:

strip("<img onerror='alert(\"could run arbitrary JS here\")' src=bogus>")

Кроме того, он не запрашивает ресурсы при разборе (например, изображения)

strip("Just text <img src='https://assets.rbl.ms/4155638/980x.jpg'>")

Answer 5

В качестве расширения метода jQuery, если ваша строка может не совпадать с HTML (например, если вы пытаетесь удалить HTML из поля формы)

jQuery(html).text();

вернет пустую строку, если нет html

Использование:

jQuery('<p>' + html + '</p>').text();

вместо.

Обновление: Как было указано в комментариях, в некоторых случаях это решение будет выполнять JavaScript, содержащийся в html, если злоумышленник может повлиять на значение html, используйте другое решение.

Answer 6

Преобразование HTML для электронной почты в виде обычного текста с сохранением гиперссылок (href) в неизменном виде

Вышеупомянутая функция, опубликованная hypoxide, работает нормально, но я хотел кое-что, что в основном конвертировало бы HTML, созданный в редакторе Web RichText (например, FCKEditor), и очищало весь HTML, но оставляло все ссылки из-за того, что я хотел оба HTML и текстовая версия для создания правильных частей в электронном письме STMP (как HTML, так и обычный текст).

После долгого поиска в Google я и мои коллеги придумали это с помощью движка регулярных выражений в Javascript:

str='this string has <i>html</i> code i want to <b>remove</b><br>Link Number 1 -><a href="http://www.bbc.co.uk">BBC</a> Link Number 1<br><p>Now back to normal text and stuff</p>
';
str=str.replace(/<br>/gi, "\n");
str=str.replace(/<p.*>/gi, "\n");
str=str.replace(/<a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 (Link->$1) ");
str=str.replace(/<(?:.|\s)*?>/g, "");

переменная str начинается следующим образом:

this string has <i>html</i> code i want to <b>remove</b><br>Link Number 1 -><a href="http://www.bbc.co.uk">BBC</a> Link Number 1<br><p>Now back to normal text and stuff</p>

и после запуска кода это выглядит так: -

this string has html code i want to remove
Link Number 1 -> BBC (Link->http://www.bbc.co.uk)  Link Number 1


Now back to normal text and stuff

Как вы можете видеть, весь HTML был удален, а Ссылка с гиперссылкой сохранилась. Также я заменил теги <p> и <br> на \n (символ новой строки), чтобы сохранить какое-то визуальное форматирование.

Чтобы изменить формат ссылки (например, BBC (Link->http://www.bbc.co.uk)), просто отредактируйте $2 (Link->$1), где $1 - это URL / URI href, а $2 - текст с гиперссылкой. С ссылками непосредственно в текстовом виде большинство почтовых клиентов SMTP преобразуют их, чтобы пользователь мог щелкнуть по ним.

Надеюсь, вы найдете это полезным.

Answer 7

Улучшение принятого ответа.

function strip(html)
{
   var tmp = document.implementation.createHTMLDocument("New").body;
   tmp.innerHTML = html;
   return tmp.textContent || tmp.innerText || "";
}

Таким образом, что-то подобное не принесет вреда:

strip("<img onerror='alert(\"could run arbitrary JS here\")' src=bogus>")

Firefox, Chromium и Explorer 9+ безопасны. Опера Престо по-прежнему уязвима. Также изображения, упомянутые в строках, не загружаются в Chromium и Firefox, сохраняя http-запросы.

Answer 8

Это должно работать в любой среде Javascript (включая NodeJS) text.replace(/<[^>]+>/g, '');

Answer 9

Я изменил ответ Jibberboy2000 , чтобы включить несколько форматов тегов <BR />, удалить все внутри тегов <SCRIPT> и <STYLE>, отформатировать полученный HTML, удалив несколько разрывов строк и пробелов, и преобразовать некоторые HTML- закодированный код в нормальный. После некоторого тестирования выясняется, что вы можете преобразовать большинство полных веб-страниц в простой текст, в котором сохраняются заголовок и содержимое страницы.

В простом примере,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--comment-->

<head>

<title>This is my title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

    body {margin-top: 15px;}
    a { color: #D80C1F; font-weight:bold; text-decoration:none; }

</style>
</head>

<body>
    <center>
        This string has <i>html</i> code i want to <b>remove</b><br>
        In this line <a href="http://www.bbc.co.uk">BBC</a> with link is mentioned.<br/>Now back to &quot;normal text&quot; and stuff using &lt;html encoding&gt;                 
    </center>
</body>
</html>

становится

Это мой заголовок

Эта строка содержит HTML-код, который я хочу удалить

В этой строке BBC (http://www.bbc.co.uk) со ссылкой упоминается.

Теперь вернемся к «обычному тексту» и прочему, используя

Функция JavaScript и тестовая страница выглядят так:

function convertHtmlToText() {
    var inputText = document.getElementById("input").value;
    var returnText = "" + inputText;

    //-- remove BR tags and replace them with line break
    returnText=returnText.replace(/<br>/gi, "\n");
    returnText=returnText.replace(/<br\s\/>/gi, "\n");
    returnText=returnText.replace(/<br\/>/gi, "\n");

    //-- remove P and A tags but preserve what's inside of them
    returnText=returnText.replace(/<p.*>/gi, "\n");
    returnText=returnText.replace(/<a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 ($1)");

    //-- remove all inside SCRIPT and STYLE tags
    returnText=returnText.replace(/<script.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/script>/gi, "");
    returnText=returnText.replace(/<style.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/style>/gi, "");
    //-- remove all else
    returnText=returnText.replace(/<(?:.|\s)*?>/g, "");

    //-- get rid of more than 2 multiple line breaks:
    returnText=returnText.replace(/(?:(?:\r\n|\r|\n)\s*){2,}/gim, "\n\n");

    //-- get rid of more than 2 spaces:
    returnText = returnText.replace(/ +(?= )/g,'');

    //-- get rid of html-encoded characters:
    returnText=returnText.replace(/&nbsp;/gi," ");
    returnText=returnText.replace(/&amp;/gi,"&");
    returnText=returnText.replace(/&quot;/gi,'"');
    returnText=returnText.replace(/&lt;/gi,'<');
    returnText=returnText.replace(/&gt;/gi,'>');

    //-- return
    document.getElementById("output").value = returnText;
}

Он использовался с этим HTML:

<textarea id="input" style="width: 400px; height: 300px;"></textarea><br />
<button onclick="convertHtmlToText()">CONVERT</button><br />
<textarea id="output" style="width: 400px; height: 300px;"></textarea><br />

Answer 10

var text = html.replace(/<\/?("[^"]*"|'[^']*'|[^>])*(>|$)/g, "");

Это версия регулярного выражения, которая более устойчива к искаженному HTML, например:

Незакрытые метки

Some text <img

"<", ">" внутри атрибутов тега

Some text <img alt="x > y">

Newlines

Some <a href="http://google.com">

код

var html = '<br>This <img alt="a>b" \r\n src="a_b.gif" />is > \nmy<>< > <a>"text"</a'
var text = html.replace(/<\/?("[^"]*"|'[^']*'|[^>])*(>|$)/g, "");