Удалите HTML-теги в Javascript с помощью Regex

108

Я пытаюсь удалить все теги html из строки в Javascript. Вот что у меня есть ... Я не могу понять, почему он не работает .... кто-нибудь знает, что я делаю не так?

<script type="text/javascript">

var regex = "/<(.|\n)*?>/";
var body = "<p>test</p>";
var result = body.replace(regex, "");
alert(result);

</script>

Большое спасибо!

javascript regex Гейб
источник

237

Попробуйте это, заметив, что грамматика HTML слишком сложна для того, чтобы регулярные выражения могли быть правильными в 100% случаев:

var regex = /(<([^>]+)>)/ig
,   body = "<p>test</p>"
,   result = body.replace(regex, "");

console.log(result);

Если вы хотите использовать такую библиотеку, как jQuery , вы можете просто сделать это:

console.log($('<p>test</p>').text());

karim79
источник

2

Почему вы оборачиваете регулярное выражение в строку? var regex = / (<([^>] +)>) / ig;

brianary

Это не сработает. В частности, он не будет работать с короткими тегами: is-oughtt.co.uk/book/sgml-9.htm#SHORTTAG

Майк Самуэль,

4

Это старый вопрос, но я просто опубликую его

Джошуа

2

Попробуйте запустить это "<img src=bogus onerror=alert(1337)". Первый не работает, потому что синтаксический анализатор HTML не требует, чтобы последний тег был закрыт символом a >, а второй не работает, потому что загрузка изображения начинается еще до того, как проанализированное дерево DOM добавляется в DOM, и $('<img ...>')вызывает анализатор HTML.

Майк Сэмюэл

1

Решение с регулярным выражением также не сработает, если >в значение атрибута включено; вот так<div data="a + b > c">

MT0 01

34

Это старый вопрос, но я наткнулся на него и подумал, что поделюсь методом, который использовал:

var body = '<div id="anid">some <a href="link">text</a></div> and some more text';
var temp = document.createElement("div");
temp.innerHTML = body;
var sanitized = temp.textContent || temp.innerText;

sanitized теперь будет содержать: "some text and some more text"

Просто, не требует jQuery и не подведет даже в более сложных случаях.

jsdw
источник

Привет. Что ж, в основном все, что он делает, это создает новый DIV, устанавливает внутреннее содержимое HTML в соответствии с предоставленным (что, как я полагаю, означает, что любой HTML-код анализируется), а затем запрашивает все текстовое содержимое div, которое игнорирует указанный HTML .

jsdw

в моем браузере у объекта нет поляinnerText

Адриан

@Adrian последняя строка выберет вывод, temp.textContentесли он существует, и попробует, только temp.innerTextесли его нет. В вашем браузере должно быть первое, но для браузеров, в которых его нет, вместо него используется второе :)

jsdw

Посмотрев на это снова (есть так много ответов). Я использую этот метод. Это тот же метод, который используется в text-angular. Они добавили пару дополнений, которые я включил в эту тему

Rentering.com

Это решение не помогло мне, я использую текстовый редактор @kolkov для Angular.

Васим Ахмад Наим

10

Это сработало для меня.

   var regex = /(&nbsp;|<([^>]+)>)/ig
      ,   body = tt
     ,   result = body.replace(regex, "");
       alert(result);

источник

5

+1 спасибо. этот лайнер проснулся идеально для моих нужд. console.log( my_html.replace(/( |<([^>]+)>)/ig, "") );

DaveAlger

6

Вот как это делает TextAngular (редактор WYSISYG). Я также обнаружил, что это наиболее последовательный ответ - NO REGEX.

@license textAngular
Author : Austin Anderson
License : 2013 MIT
Version 1.5.16
// turn html into pure text that shows visiblity
function stripHtmlToText(html)
{
    var tmp = document.createElement("DIV");
    tmp.innerHTML = html;
    var res = tmp.textContent || tmp.innerText || '';
    res.replace('\u200B', ''); // zero width space
    res = res.trim();
    return res;
}

Rentering.com
источник

2

вы можете использовать мощную библиотеку для управления String - undrescore.string.js

_('a <a href="#">link</a>').stripTags()

=> 'ссылка'

_('a <a href="#">link</a><script>alert("hello world!")</script>').stripTags()

=> 'a linkalert ("привет, мир!")'

Не забудьте импортировать эту библиотеку следующим образом:

        <script src="underscore.js" type="text/javascript"></script>
        <script src="underscore.string.js" type="text/javascript"></script>
        <script type="text/javascript"> _.mixin(_.str.exports())</script>

Абденнур Туми
источник

2

Я посмотрел на источник, и они фактически используют то же регулярное выражение, что и в другом ответе, внутри.

Евгений

2

В моей простой библиотеке JavaScript под названием FuncJS есть функция с именем «strip_tags ()», которая выполняет эту задачу за вас - без необходимости вводить какие-либо регулярные выражения.

Например, предположим, что вы хотите удалить теги из предложения - с помощью этой функции вы можете сделать это просто так:

strip_tags("This string <em>contains</em> <strong>a lot</strong> of tags!");

Это произведет «Эта строка содержит много тегов!».

Для лучшего понимания прочтите документацию на GitHub FuncJS .

Кроме того, если хотите, оставьте отзыв через форму. Это было бы мне очень полезно!

Шарикуль Ислам
источник

Не могли бы вы strip_tags()рассказать, что делает, вместо того, чтобы просто продвигать вашу библиотеку и не объяснять ее? Ссылка объясняет использование API, но не то, что он делает .

Джастин Бодри

1

ну, нашел на том сайте, который он дал,

strip_tags = function(e) { var _hasTag, _tag_string; if (!(e === void 0 || e === null || e === "")) { _tag_string = e; if (typeof _tag_string === "object") { _tag_string = _tag_string.outerHTML; } _hasTag = _tag_string.match(/(<([^>]+)>)/ig); if (_hasTag) { return trim(_tag_string.replace(/(<([^>]+)>)/ig, '')); } else { return trim(_tag_string); } } else { throw new Error("The 'strip_tags' function expects one argument in the form of a string or object."); } };

Предраг Стоядинович

1

Это решение для тегов HTML, & nbsp и т. Д., И вы можете удалять и добавлять условия, чтобы получить текст без HTML, и вы можете заменить его любым.

convertHtmlToText(passHtmlBlock)
{
   str = str.toString();
  return str.replace(/<[^>]*(>|$)|&nbsp;|&zwnj;|&raquo;|&laquo;|&gt;/g, 'ReplaceIfYouWantOtherWiseKeepItEmpty');
}

Сахил Ралкар
источник

0

Для правильного дезинфекции HTML в JS см. Http://code.google.com/p/google-caja/wiki/JsHtmlSanitizer.

Майк Сэмюэл
источник

0

<html>
<head>
<script type="text/javascript">
function striptag(){
var html = /(<([^>]+)>)/gi;
for (i=0; i < arguments.length; i++)
arguments[i].value=arguments[i].value.replace(html, "")
}
</script>
</head> 
<body>
       <form name="myform">
<textarea class="comment" title="comment" name=comment rows=4 cols=40></textarea><br>
<input type="button" value="Remove HTML Tags" onClick="striptag(this.form.comment)">
</form>
</body>
</html>

Сурья Р. Правин
источник

0

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

  "<<h1>h1>foo<<//</h1>h1/>"

Этот ввод гарантирует, что при зачистке будет собран набор тегов для вас, и в результате получится:

  "<h1>foo</h1>"

Кроме того, текстовая функция jquery удаляет текст, не окруженный тегами.

Вот функция, которая использует jQuery, но должна быть более устойчивой в обоих случаях:

var stripHTML = function(s) {
    var lastString;

    do {            
        s = $('<div>').html(lastString = s).text();
    } while(lastString !== s) 

    return s;
};

Рик Мойнихан
источник

0

Я делаю это практически однострочно.

Функция создает объект Range, а затем создает DocumentFragment в Range со строкой в качестве дочернего содержимого.

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

Я понимаю, что этот вопрос старый, я просто подумал, что мое решение уникально, и хотел поделиться. :)

function getTextFromString(htmlString) {
    return document
        .createRange()
        // Creates a fragment and turns the supplied string into HTML nodes
        .createContextualFragment(htmlString)
        // Gets the text from the fragment
        .textContent
        // Removes the Zero-Width Space, Zero-Width Joiner, Zero-Width No-Break Space, Left-To-Right Mark, and Right-To-Left Mark characters
        .replace(/[\u200B-\u200D\uFEFF\u200E\u200F]/g, '')
        // Trims off any extra space on either end of the string
        .trim();
}

var cleanString = getTextFromString('<p>Hello world! I <em>love</em> <strong>JavaScript</strong>!!!</p>');

alert(cleanString);

ЭлайджаФаулер
источник

-1

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

Коул
источник

Удалите HTML-теги в Javascript с помощью Regex

Ответы: