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

Ответы:

763

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

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

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

Shog9
источник
40
Просто помните, что этот подход довольно противоречив и не сможет удалить определенные символы в определенных браузерах. Например, в Prototype.js мы используем этот подход для повышения производительности, но
обходим
11
Помните, что ваш пробел будет испорчен. Раньше я использовал этот метод, а затем возникли проблемы, так как некоторые коды продуктов содержали двойные пробелы, которые заканчивались как одиночные пробелы после того, как я получил innerText из DIV. Тогда коды продуктов не совпадали позже в приложении.
Магнус Смит
11
@Magnus Smith: Да, если пробел является проблемой - или действительно, если вам нужен этот текст, который напрямую не связан с конкретным HTML DOM, с которым вы работаете - тогда вам лучше использовать один из других Решения, приведенные здесь. Основные преимущества этого метода в том, что он 1) тривиален и 2) надежно обрабатывает теги, пробелы, сущности, комментарии и т. Д. Так же, как браузер, в котором вы работаете . Это часто полезно для кода веб-клиента, но не обязательно подходит для взаимодействия с другими системами, где правила отличаются.
Shog9
220
Не используйте это с HTML из ненадежного источника. Чтобы понять почему, попробуйте запуститьstrip("<img onerror='alert(\"could run arbitrary JS here\")' src=bogus>")
Майк Сэмюэль
24
Если html содержит изображения (теги img), изображения будут запрашиваться браузером. Это не хорошо.
Доуу
592
myString.replace(/<[^>]*>?/gm, '');
nickf
источник
4
Не работает, <img src=http://www.google.com.kh/images/srpr/nav_logo27.png onload="alert(42)" если вы вводите через document.writeили объединяете строку, содержащую >перед введением через innerHTML.
Майк Самуэль
1
@ PerishableDave, я согласен, что >во втором останется. Это не опасность для инъекций. Опасность возникает из-за <левого в первом, что приводит к тому, что анализатор HTML находится в контексте, отличном от состояния данных, при запуске второго. Обратите внимание, что нет перехода из состояния данных в >.
Майк Сэмюэль
73
@MikeSamuel Мы уже определились с этим ответом? Наивный пользователь тут готов копировать-вставить.
Зигги
1
Это также, как я полагаю, полностью запутывает, если при условии что-то вроде <button onClick="dostuff('>');"></button>Допущения правильно написанного HTML вы все равно должны принять во внимание, что знак «больше» может быть где-то в цитируемом тексте атрибута. Также вы хотели бы удалить весь текст внутри <script>тегов, по крайней мере.
Джонатон
15
@AntonioMax, я ответил на этот вопрос до тошноты , но по существу вашего вопроса, потому что критический код безопасности не должен копироваться и вставляться. Вы должны загрузить библиотеку, обновлять ее и обновлять, чтобы вы были защищены от недавно обнаруженных уязвимостей и изменений в браузерах.
Майк Сэмюэл
249

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

jQuery(html).text();

Это извлекает весь текст из строки HTML.

отметка
источник
111
Мы всегда используем jQuery для проектов, поскольку в наших проектах всегда много Javascript. Поэтому мы не добавляли объем, мы воспользовались существующим кодом API ...
Mark
32
Вы используете его, но ОП не может. вопрос был о Javascript НЕ JQuery.
Дементик
105
Это по-прежнему полезный ответ для людей, которым нужно сделать то же самое, что и OP (например, я), и не против использовать jQuery (как я), не говоря уже о том, что он мог бы быть полезен для OP, если бы они рассматривали возможность использования JQuery. Смысл сайта - делиться знаниями. Имейте в виду, что пугающий эффект, который вы можете получить, наказывая полезные ответы без веской причины.
Acjay
27
Шокирующе @Dementic, я считаю, что темы с несколькими ответами являются наиболее полезными, потому что часто вторичный ответ соответствует моим точным потребностям, в то время как первичный ответ соответствует общему случаю.
Эрик Голдберг
36
Это не сработает, если какая-то часть строки не будет заключена в тег HTML. Например, «<b> Ошибка: </ b> Пожалуйста, введите действительный адрес электронной почты» будет возвращать только «Ошибка:»
Аамир Африди
128

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


В виде отметил Майк Сэмюэл с комментарием, эта функция может выполнять встроенные коды 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'>")
Sabaz
источник
3
Стоит добавить, что это решение работает только в браузере.
kris_IV
1
Это не полосы тегов, но больше похоже на PHP htmlspecialchars (). Все еще полезно для меня.
Даантье,
Обратите внимание, что это также удаляет пробелы в начале текста.
Рейн Ревер
Также
Крис
Кажется, это намного быстрее, чем ответ @ Shog9
Шмуэль Каменский
55

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

jQuery(html).text();`

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

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

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

вместо.

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

user999305
источник
12
Или$("<p>").html(html).text();
Димитар Димитров
4
Это по- прежнему выполняет , вероятно , опасный кодjQuery('<span>Text :) <img src="a" onerror="alert(1)"></span>').text()
Simon
попробуйте jQuery ("aa & # X003c; script> alert (1) & # X003c; / script> a"). text ();
Гжегож Качан
41

Преобразование 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 преобразуют их, чтобы пользователь мог щелкнуть по ним.

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

Jibberboy2000
источник
Он не обрабатывает "& nbsp;"
Роза Неттойер
33

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

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-запросы.

Janghou
источник
Это какой-то путь, но он не безопасен<script><script>alert();
Арт
1
Это не запускает никаких скриптов здесь, в Chromium / Opera / Firefox на Linux, так почему это не безопасно?
Janghou
Мои извинения, я, должно быть, проверил неправильно, я, вероятно, забыл нажать снова запустить на jsFiddle.
Арт
«Новый» аргумент излишен, я думаю?
Джон Шнайдер
В соответствии со спецификациями в настоящее время это необязательно, но это было не всегда.
Janghou
23

Это должно делать работу в любой среде Javascript (включая NodeJS).

const text = `
<html lang="en">
  <head>
    <style type="text/css">*{color:red}</style>
    <script>alert('hello')</script>
  </head>
  <body><b>This is some text</b><br/><body>
</html>`;

// Remove style tags and content
text.replace(/<style[^>]*>.*<\/style>/gm, '')
    // Remove script tags and content
    .replace(/<script[^>]*>.*<\/script>/gm, '')
    // Remove all opening, closing and orphan HTML tags
    .replace(/<[^>]+>/gm, '')
    // Remove leading spaces and repeated CR/LF
    .replace(/([\r\n]+ +)+/gm, '');
Karl.S
источник
@pstanton не могли бы вы привести рабочий пример своего заявления?
Karl.S
3
<html><style..>* {font-family:comic-sans;}</style>Some Text</html>
pstanton
@pstanton Я исправил код и добавил комментарии, извините за поздний ответ.
Karl.S
16

Я изменил ответ 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 />
Elendurwen
источник
1
Мне нравится это решение, потому что оно обрабатывает специальные символы html ... но их все еще недостаточно ... лучший ответ для меня будет иметь дело со всеми из них. (что, вероятно, делает jquery).
Даниэль Герсон
2
Я думаю, что /<p.*>/giдолжно быть /<p.*?>/gi.
cbron
Обратите внимание , что для удаления всех <br>тегов вы можете использовать хорошее регулярное выражение вместо этого: /<br\s*\/?>/таким образом у вас есть только один заменить вместо 3. Кроме того, мне кажется , что для декодирования лиц , за исключением вы можете иметь один регулярное выражение, что - то вроде этого: /<[a-z].*?\/?>/.
Алексис Уилке
Хороший сценарий. Но как насчет содержимого таблицы? Любая идея, как это может быть отображено
Христо
@DanielGerson, кодирование html становится очень сложным, очень быстрым, но лучшим подходом, похоже, является использование библиотеки
he
15
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, "");
гегемон
источник
7

Другое, по общему признанию, менее изящное решение, чем nickf или Shog9, было бы рекурсивно обходить DOM, начиная с тега <body>, и добавлять каждый текстовый узел.

var bodyContent = document.getElementsByTagName('body')[0];
var result = appendTextNodes(bodyContent);

function appendTextNodes(element) {
    var text = '';

    // Loop through the childNodes of the passed in element
    for (var i = 0, len = element.childNodes.length; i < len; i++) {
        // Get a reference to the current child
        var node = element.childNodes[i];
        // Append the node's value if it's a text node
        if (node.nodeType == 3) {
            text += node.nodeValue;
        }
        // Recurse through the node's children, if there are any
        if (node.childNodes.length > 0) {
            appendTextNodes(node);
        }
    }
    // Return the final result
    return text;
}
Bryan
источник
3
Хлоп. если вы собираетесь создать DOM-дерево из вашей строки, просто используйте способ shog!
Nickf
Да, мое решение использует кувалду, где обычный молоток более уместен :-). И я согласен, что ваши решения и решения Shog9 лучше, и в основном сказал так же в ответе. Я также не смог отразить в своем ответе, что html уже содержится в строке, что в любом случае делает мой ответ практически бесполезным в отношении исходного вопроса. :-(
Брайан
1
Чтобы быть справедливым, это имеет значение - если вам абсолютно необходимо сохранить / весь / текст, то это, по крайней мере, приличный шанс на захват новых строк, табуляции, возвратов каретки и т. Д. ... Опять же, решение Никфа должно сделать то же самое и делать намного быстрее ... эх.
Shog9
7

Если вы хотите сохранить ссылки и структуру содержимого (h1, h2 и т. Д.), Вам следует проверить TextVersionJS. Вы можете использовать его с любым HTML, хотя он был создан для преобразования электронного письма HTML в простой текст.

Использование очень просто. Например, в файле node.js:

var createTextVersion = require("textversionjs");
var yourHtml = "<h1>Your HTML</h1><ul><li>goes</li><li>here.</li></ul>";

var textVersion = createTextVersion(yourHtml);

Или в браузере с чистым js:

<script src="textversion.js"></script>
<script>
  var yourHtml = "<h1>Your HTML</h1><ul><li>goes</li><li>here.</li></ul>";
  var textVersion = createTextVersion(yourHtml);
</script>

Это также работает с require.js:

define(["textversionjs"], function(createTextVersion) {
  var yourHtml = "<h1>Your HTML</h1><ul><li>goes</li><li>here.</li></ul>";
  var textVersion = createTextVersion(yourHtml);
});
gyula.nemeth
источник
4

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

Я начал изучать, как это делает php, и наткнулся на библиотеку php.js, которая копирует метод strip_tags: http://phpjs.org/functions/strip_tags/

Deminetix
источник
Это аккуратная функция и хорошо документирована. Тем не менее, это может быть сделано быстрее, когда, как allowed == ''я думаю, это то, о чем просил ОП, а это почти то, что Байрон ответил ниже (Байрон только [^>]ошибся.)
Алексис Уилк
1
Если вы используете allowedпараметр, вы уязвимы для XSS: stripTags('<p onclick="alert(1)">mytext</p>', '<p>')возвращается<p onclick="alert(1)">mytext</p>
Крис Синелли
4
function stripHTML(my_string){
    var charArr   = my_string.split(''),
        resultArr = [],
        htmlZone  = 0,
        quoteZone = 0;
    for( x=0; x < charArr.length; x++ ){
     switch( charArr[x] + htmlZone + quoteZone ){
       case "<00" : htmlZone  = 1;break;
       case ">10" : htmlZone  = 0;resultArr.push(' ');break;
       case '"10' : quoteZone = 1;break;
       case "'10" : quoteZone = 2;break;
       case '"11' : 
       case "'12" : quoteZone = 0;break;
       default    : if(!htmlZone){ resultArr.push(charArr[x]); }
     }
    }
    return resultArr.join('');
}

Учет> внутри атрибутов и <img onerror="javascript">во вновь созданных элементах dom.

Применение:

clean_string = stripHTML("string with <html> in it")

демо:

https://jsfiddle.net/gaby_de_wilde/pqayphzd/

демо топ-ответа, делающего ужасные вещи:

https://jsfiddle.net/gaby_de_wilde/6f0jymL6/1/

user40521
источник
Вам также нужно обрабатывать экранированные кавычки внутри значения атрибута (например string with <a malicious="attribute \">this text should be removed, but is not">example</a>).
Логан Пикап
4

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

function removeTags(string, array){
  return array ? string.split("<").filter(function(val){ return f(array, val); }).map(function(val){ return f(array, val); }).join("") : string.split("<").map(function(d){ return d.split(">").pop(); }).join("");
  function f(array, value){
    return array.map(function(d){ return value.includes(d + ">"); }).indexOf(true) != -1 ? "<" + value : value.split(">")[1];
  }
}

var x = "<span><i>Hello</i> <b>world</b>!</span>";
console.log(removeTags(x)); // Hello world!
console.log(removeTags(x, ["span", "i"])); // <span><i>Hello</i> world!</span>
Гарри Стивенс
источник
3

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

stringWithHTML = stringWithHTML.replace(/<\/?[a-z][a-z0-9]*[^<>]*>/ig, "");
Байрон Караско
источник
11
Не делайте этого, если вы заботитесь о безопасности. Если пользовательский ввод такой: '<scr <script> ipt> alert (42); </ scr </ script> ipt>', то урезанная версия будет такой: '<script> alert (42); </ script >». Так что это уязвимость XSS.
Молнарг
Вы должны изменить [^<>]с , [^>]поскольку действительный тег не может содержать <символ, то уязвимость XSS исчезает.
Алексис Уилке
3

Я внес некоторые изменения в оригинальный скрипт Jibberboy2000. Надеюсь, он кому-нибудь пригодится

str = '**ANY HTML CONTENT HERE**';

str=str.replace(/<\s*br\/*>/gi, "\n");
str=str.replace(/<\s*a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 (Link->$1) ");
str=str.replace(/<\s*\/*.+?>/ig, "\n");
str=str.replace(/ {2,}/gi, " ");
str=str.replace(/\n+\s*/gi, "\n\n");
Jaxolotl
источник
3

Вот версия, которая решает проблему безопасности @ MikeSamuel:

function strip(html)
{
   try {
       var doc = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
       doc.documentElement.innerHTML = html;
       return doc.documentElement.textContent||doc.documentElement.innerText;
   } catch(e) {
       return "";
   }
}

Обратите внимание, что он вернет пустую строку, если разметка HTML не является допустимым XML (иначе, теги должны быть закрыты, а атрибуты должны быть в кавычках). Это не идеально, но избегает проблемы использования потенциала безопасности.

Если вам не нужна действительная разметка XML, попробуйте использовать:

var doc = document.implementation.createHTMLDocument("");

но это не идеальное решение и по другим причинам.

Джереми Джонстон
источник
Во многих случаях это не удастся, если текст поступит от пользователя (текстовая область или contenteditable виджет ...)
Alexis Wilke
3

Вы можете безопасно удалить HTML-теги, используя атрибут песочницы iframe .

Идея здесь состоит в том, что вместо того, чтобы пытаться пересмотреть нашу строку, мы используем преимущества встроенного синтаксического анализатора браузера, вставляя текст в элемент DOM и затем запрашивая textContent/innerText свойство этого элемента.

Лучше всего подходящим элементом для вставки нашего текста является вставленный в песочную форму iframe, таким образом мы можем предотвратить любое выполнение произвольного кода (также известный как XSS ).

Недостатком этого подхода является то, что он работает только в браузерах.

Вот что я придумала (не проверено в бою):

const stripHtmlTags = (() => {
  const sandbox = document.createElement("iframe");
  sandbox.sandbox = "allow-same-origin"; // <--- This is the key
  sandbox.style.setProperty("display", "none", "important");

  // Inject the sanbox in the current document
  document.body.appendChild(sandbox);

  // Get the sandbox's context
  const sanboxContext = sandbox.contentWindow.document;

  return (untrustedString) => {
    if (typeof untrustedString !== "string") return ""; 

    // Write the untrusted string in the iframe's body
    sanboxContext.open();
    sanboxContext.write(untrustedString);
    sanboxContext.close();

    // Get the string without html
    return sanboxContext.body.textContent || sanboxContext.body.innerText || "";
  };
})();

Использование ( демо ):

console.log(stripHtmlTags(`<img onerror='alert("could run arbitrary JS here")' src='bogus'>XSS injection :)`));
console.log(stripHtmlTags(`<script>alert("awdawd");</` + `script>Script tag injection :)`));
console.log(stripHtmlTags(`<strong>I am bold text</strong>`));
console.log(stripHtmlTags(`<html>I'm a HTML tag</html>`));
console.log(stripHtmlTags(`<body>I'm a body tag</body>`));
console.log(stripHtmlTags(`<head>I'm a head tag</head>`));
console.log(stripHtmlTags(null));
Этьен Мартин
источник
Отличное решение для веб-среды! Вы , вероятно , не следует использовать в IIFE , так как с ECMAScript 2015, блок-контекстные переменные уже областью видимости блока правильно с letи constоператорами. Кроме того, используя ваше решение, я получил множество ссылок на iframesнеиспользованные внутри документа. Подумайте о том, чтобы добавить document.body.removeChild(sandbox)код в код для будущих читателей, использующих копии.
Амин НАИРИ
2

С помощью jQuery вы можете просто получить его, используя

$('#elementID').text()
ianaz
источник
2

Код ниже позволяет вам сохранить некоторые HTML-теги, удаляя все остальные

function strip_tags(input, allowed) {

  allowed = (((allowed || '') + '')
    .toLowerCase()
    .match(/<[a-z][a-z0-9]*>/g) || [])
    .join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)

  var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
      commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;

  return input.replace(commentsAndPhpTags, '')
      .replace(tags, function($0, $1) {
          return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
      });
}
aWebDeveloper
источник
1
Вы должны процитировать источник ( phpjs). Если вы используете allowedпараметр, вы уязвимы для XSS: stripTags('<p onclick="alert(1)">mytext</p>', '<p>')возвращается<p onclick="alert(1)">mytext</p>
Крис Синелли
2

Также можно использовать фантастический HTML-парсер htmlparser2 pure JS. Вот рабочая демонстрация:

var htmlparser = require('htmlparser2');

var body = '<p><div>This is </div>a <span>simple </span> <img src="test"></img>example.</p>';

var result = [];

var parser = new htmlparser.Parser({
    ontext: function(text){
        result.push(text);
    }
}, {decodeEntities: true});

parser.write(body);
parser.end();

result.join('');

Выход будет This is a simple example.

Смотрите это в действии здесь: https://tonicdev.com/jfahrenkrug/extract-text-from-html

Это работает как в узле, так и в браузере, если вы упаковываете свое веб-приложение с помощью такого инструмента, как веб-пакет.

Йоханнес Фаренкруг
источник
2

Мне просто нужно было удалить <a>теги и заменить их текстом ссылки.

Кажется, это отлично работает.

htmlContent= htmlContent.replace(/<a.*href="(.*?)">/g, '');
htmlContent= htmlContent.replace(/<\/a>/g, '');
FrigginGlorious
источник
Это относится только к тегам и требует настройки для широкой функции.
m3nda
Да, плюс тег привязки может иметь много других атрибутов, таких как title="...".
Алексис Уилке
1

Я сам создал рабочее регулярное выражение:

str=str.replace(/(<\?[a-z]*(\s[^>]*)?\?(>|$)|<!\[[a-z]*\[|\]\]>|<!DOCTYPE[^>]*?(>|$)|<!--[\s\S]*?(-->|$)|<[a-z?!\/]([a-z0-9_:.])*(\s[^>]*)?(>|$))/gi, ''); 
MarekJ47
источник
1

простые 2 строки JQuery, чтобы раздеть HTML.

 var content = "<p>checking the html source&nbsp;</p><p>&nbsp;
  </p><p>with&nbsp;</p><p>all</p><p>the html&nbsp;</p><p>content</p>";

 var text = $(content).text();//It gets you the plain text
 console.log(text);//check the data in your console

 cj("#text_area_id").val(text);//set your content to text area using text_area_id
разработчик
источник
1

Принятый ответ работает в основном нормально, однако в IE, если htmlстрока, nullвы получаете "null"(вместо ''). Исправлена:

function strip(html)
{
   if (html == null) return "";
   var tmp = document.createElement("DIV");
   tmp.innerHTML = html;
   return tmp.textContent || tmp.innerText || "";
}
basarat
источник
1

Используя Jquery:

function stripTags() {
    return $('<p></p>').html(textToEscape).text()
}
math2001
источник
1

inputЭлемент поддерживает только одну строку текста :

Текстовое состояние представляет собой однострочный текстовый элемент управления для редактирования значения элемента.

function stripHtml(str) {
  var tmp = document.createElement('input');
  tmp.value = str;
  return tmp.value;
}

Обновление: это работает как ожидалось

function stripHtml(str) {
  // Remove some tags
  str = str.replace(/<[^>]+>/gim, '');

  // Remove BB code
  str = str.replace(/\[(\w+)[^\]]*](.*?)\[\/\1]/g, '$2 ');

  // Remove html and line breaks
  const div = document.createElement('div');
  div.innerHTML = str;

  const input = document.createElement('input');
  input.value = div.textContent || div.innerText || '';

  return input.value;
}
Майк Дацко
источник
Не работает, всегда указывайте браузер, который вы используете при публикации ответа. Это неточно и не будет работать в Chrome 61. Теги просто отображаются в виде строки.
17
0
    (function($){
        $.html2text = function(html) {
            if($('#scratch_pad').length === 0) {
                $('<div id="lh_scratch"></div>').appendTo('body');  
            }
            return $('#scratch_pad').html(html).text();
        };

    })(jQuery);

Определите это как плагин jquery и используйте его следующим образом:

$.html2text(htmlContent);
Шив Шанкар
источник
Допустим, это происходит от ввода пользователя. Он может быть использован для добавления скрипта или макроса на вашу страницу
Oluwatumbi