8

Есть регулярное выражение (\<(/?[^>]+)>), которое оставляет HTML-тэги. Как наоборот удалить все тэги, оставив только текст?

6 ответов 6

14

Так собственно её и можно использовать для чистки тегов, скормив в sub.

В Python:

>>> import re
>>> re.sub(r'(\<(/?[^>]+)>)', '', '<b>Текст с <br/>тегами</b>')
'Текст с тегами'

В JavaScript:

>>> console.log('<b>Текст с <br/>тегами</b>'.replace(/(\<(\/?[^>]+)>)/g, ''))
"Текст с тегами"

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

>>> line = '<div> >>>2 + 3 < 6<br/>True <!-- коммен > тарий --></div><b'
>>> re.sub(r'(\<(/?[^>]+)>)', '', line)
' >>>2 + 3 True  тарий --><b'

И для такого дела лучше применять полноценные html-парсеры, а регулярки к html-коду не подпускать вообще.

14
  • Комментарии надо в первую очередь удалять. Затем уже теги.
    – Qwertiy
    3 июл 2015 в 9:24
  • Активно поддержу идею использования хтмл-парсера, а не регулярок. 3 июл 2015 в 9:54
  • @SergeySnegirev, а я по поводу парсера никаких возражений не только не высказывал, но и не имею. С другой строны, для многих конкретных задач вполне подойдёт простая регулярка.
    – Qwertiy
    3 июл 2015 в 10:02
  • @Qwertiy невалидному html-коду предварительное удаление комментариев не поможет. Дар для конкретных задач - если точно известна структура документа, если точно известна его (не)валидность, если надо вытащить конкретный кусок текста - регулярки могут подойти. Но если, например, приспичит фильтровать пользовательский ввод (а, подозреваю, это и хочет автор), то так делать уже опасно
    – andreymal
    3 июл 2015 в 17:19
  • Невалидному html'у поможет более строгое определение тегов (например, в моей регулярке требуются буквенно-цифроые символы после <). Удаление комментариев поможет от другого - оно повышает точность и избавляет от фокусов с синтаксисом.
    – Qwertiy
    3 июл 2015 в 17:22
9

На данный момент, наиболее близкая к браузерной версия:

function textByBrowser(html) {
  var div = document.createElement("div");
  div.innerHTML = html;
  return div.textContent;
}

function textByRegex(html) {
  return html.replace(/<!--[\s\S]*?--!?>/g, "").replace(/<\/?[a-z][^>]*(>|$)/gi, "");
}

var tests = [
  '2+3<6',
  '2+3<',
  '<<a>script>alert("XSS!")<<a>/script>',
  '<div> >>>2 + 3 < 6<br/>True <!-- коммен > тарий --></div><b',
  '<script<b>>alert(1)</script</b>>',
  '<a\n>123\n</a>'
];

tests.map(textByBrowser) + "" == tests.map(textByRegex) // true

Наличие угловых скобок в аттрибутах обрабатывается некорректно:

textByBrowser('1<div data-smth=">">2</div>3') // 123
textByRegex('1<div data-smth=">">2</div>3') // 1">23

И с мнемониками надо разобраться по своему усмотрению:

textByBrowser("&lt;") // "<"
textByRegex("&lt;") // "&lt;"

Обращаю внимание, что ни один из способов получения текста не является защитой от XSS-атак. При выводе пользовательского текста на странице всегда надо применять экранирование.

console.log(textByBrowser('<<a>script>alert("XSS!")<<a>/script>'));
// <script>alert("XSS!")</script>

PS: Более ранняя версия ответа с другим кодом доступна в истории.

4
  • Может рекурсивно сделать баланс < и > ? тогда будет удаляться сломанная разметка
    – ReinRaus
    3 июл 2015 в 20:50
  • @ReinRaus, рекурсия в регулярках? Точно не в js.
    – Qwertiy
    3 июл 2015 в 21:40
  • @ReinRaus, кстати, а где должен быть баланс? Там надо другое править - более гибко обрабатывать содержимое атрибутов.
    – Qwertiy
    12 авг 2017 в 17:50
  • не помню. давно это было
    – ReinRaus
    13 авг 2017 в 11:21
3

(?:<).*?(?:>) - вырезает все теги

1
  • 1
    Группы-то зачем?
    – Qwertiy
    10 фев 2016 в 12:33
2

В php есть функция strip_tags - удаляет HTML и PHP тэги из строки

2

Как по мне, более точное определение тега будет таким

В JavaScript:

<\/?[A-Za-z]+[^>]*>
8
  • От моего очень мало отличается...
    – Qwertiy
    30 дек 2018 в 17:04
  • Вообще говоря различия существенные, стандартные теги не могут начинаться с цифры и нижнего подчеркивания, также тег в начале идет без пробела. А ваша регулярка все это допускает. 1 янв 2019 в 17:23
  • Где? о_О Ты точно с моим ответом сравниваешь? У меня вот такая: /<\/?[a-z][^>]*(>|$)/gi
    – Qwertiy
    1 янв 2019 в 18:12
  • Да видимо напутал, не с вашим. Ваш по лучше будет, но. Ваша: "[a-z]" - это только 1 символ из диапазона a-z, затем любой символ "[^>]" кроме ">" 0 или более раз, пока не встретит закрывающую кавычку или конец строки. Ну как минимум конец строки это не закрытие тега "<f". Во вторых, запрос типа "<f5454>" тоже прокатит, стандартных тегов таких нет, с цифрами, но может быть полезным если есть кастомные теги, конечно. regexper.com/#%2F%3C%5C%2F%3F%5Ba-z%5D%5B%5E%3E%5D*%28%3E%7C%24%29%2Fgi 2 янв 2019 в 19:23
  • Хотя мой можно улучшить еще так <\/?[A-Za-z]+?[^>]*?> regexper.com/#%3C%5C%2F%3F%5BA-Za-z%5D%2B%3F%5B%5E%3E%5D*%3F%3E 2 янв 2019 в 19:32
1
var htmlTage = "<p>Hello world</p>";

var regExp = /(<.*?>)/g

var result = htmlTage.replace(regExp, " ");

console.log(result);
1
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 24 июн 2022 в 16:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.