Вернуться к уроку

Найти HTML-теги

Создайте регулярное выражение для поиска всех (открывающихся и закрывающихся) HTML-тегов вместе с атрибутами.

Пример использования:

var re = /* ваш регэксп */

var str = '<> <a href="/"> <input type="radio" checked> <b>';

alert( str.match(re) ); // '<a href="/">', '<input type="radio" checked>', '<b>'

В этой задаче можно считать, что тег начинается с <, заканчивается > и может содержать внутри любые символы, кроме < и >.

Но хотя бы один символ внутри тега должен быть: <> – не тег.

Начнём поиск с <, затем один или более произвольный символ, но до закрывающего «уголка»: .+?>.

Проверим, как работает этот регэксп:

var re = /<.+?>/g;

var str = '<> <a href="/"> <input type="radio" checked> <b>';

alert( str.match(re) ); // <> <a href="/">, <input type="radio" checked>, <b>

Результат неверен! В качестве первого тега регэксп нашёл подстроку <> <a href="/">, но это явно не тег.

Всё потому, что .+? – это «любой символ (кроме \n), повторяющийся один и более раз до того, как оставшаяся часть шаблона совпадёт (ленивость)».

Поэтому он находит первый <, затем есть «всё подряд» до следующего >.

Первое совпадение получается как раз таким:

<.............>
<> <a href="/"> <input type="radio" checked> <b>

Правильным решением будет использовать <[^>]+>:

var re = /<[^>]+>/g

var str = '<> <a href="/"> <input type="radio" checked> <b>';

alert( str.match(re) ); // <a href="/">, <input type="radio" checked>, <b>

Это же решение автоматически позволяет находится внутри тегу символу \n, который в класс точка . не входит.