Видаліть 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>

Дуже дякую!

Відповіді:


237

Спробуйте це, зазначивши, що граматика HTML занадто складна, щоб регулярні вирази були правильними у 100% часу:

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

console.log(result);

Якщо ви готові використовувати бібліотеку, таку як jQuery , ви можете просто зробити це:

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

2
Чому ви загортаєте регулярний вираз в рядок? var regex = / (<([^>] +)>) / ig;
бріанарія

Це не спрацює. Зокрема, він не матиме коротких тегів: is-thought.co.uk/book/sgml-9.htm#SHORTTAG
Майк Самуель

4
Це старе питання, але я лише опублікую це тут: jsperf.com/regex-replace-vs-jquery-text
Джошуа

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

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

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, і він не повинен підводити вас навіть у більш складних випадках.


Hiya. Ну, в основному, все це - створити новий DIV, встановити внутрішній HTML-вміст на все, що передбачено (що, мабуть, означає, що будь-який HTML-код розбирається), а потім запитує весь текстовий вміст div, який ігнорує згаданий HTML .
jsdw

у моєму браузері об’єкт не має поляinnerText
Адріан

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

Подивившись на це ще раз (є так багато відповідей там). Я використовую цей метод. Це той самий метод, який використовується в текстовому куті. Вони додали пару додаткових даних, які я включив у цю тему
Rentering.com

Для мене це рішення не вдалось, я використовую @kolkov Text Editor для Angular.
Waseem Ahmad Naeem

10

Це працювало для мене.

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

5
+1 спасибі цей лайнер прокинувся ідеально для моїх потреб. console.log( my_html.replace(/(&nbsp;|<([^>]+)>)/ig, "") );
DaveAlger

6

Ось як це робить TextAngular (WYSISYG Editor). Я також виявив, що це найбільш послідовна відповідь, яка НЕ ​​РЕГЕКС.

@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;
}

2

ви можете використовувати потужну бібліотеку для управління String, яка є undrescore.string.js

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

=> "посилання"

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

=> 'a linkkalert ("привіт, світ!")'

Не забудьте імпортувати цю лінзу наступним чином:

        <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."); } };
Predrag Stojadinović

1

Це рішення для тегів HTML і & nbsp тощо. Ви можете видалити та додати умови, щоб отримати текст без HTML, і ви можете його замінити будь-яким.

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


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 у діапазоні зі строкою як дочірній вміст.

Потім він захоплює текст фрагмента, видаляє будь-які "невидимі" / нульові ширини символів і обрізає його з будь-якого провідного / відсталого пробілу.

Я усвідомлюю, що це питання давнє, я просто думав, що моє рішення було унікальним і хотів поділитися. :)

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 з початкового рядка.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.