JavaScript Regex для извлечения текста из HTML-тегов стиля
Я пытаюсь использовать JavaScript RegEx для извлечения всего текста между тегами CSS HTML:
var rawHtml = "<style type='text/css'> div { color: red; } </style>";
//var rawHtml = "<style type=\"text/css\"> div { color: red; } </style>";
//var rawHtml = "<style> div { color: red; } </style>";
var cssString = rawHtml.match(/<style[^>]*>(.+?)</style>/gi);
console.info(cssString);
Тег стиля может иметь атрибуты, а также заключать в одинарные или двойные кавычки. Как успешно извлечь для всех вариантов использования? Мое регулярное выражение не подхватывает его.
Не анализируйте как текст: обычно это не сработает (например, что, если <style> прокомментирован?).
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Просто используйте вместо этого DOMParser:
const rawHTML = "<style type='text/css'> div { color: red; } </style>";
const doc = new DOMParser().parseFromString(rawHTML, "text/html");
const matches = [...doc.querySelectorAll('style')]
.map(style => style.textContent);
console.info(matches);Я думаю, что основная проблема в вашем коде заключается в том, что вы установили cssString на полное совпадение, а не на часть, указанную в круглых скобках. Вам понадобится что-то вроде:
var innerHTML = cssString ? cssString[1] : "";
Важной частью здесь является то, что совпадение в скобках с вашим регулярным выражением - (.+?) - хранится в обратной ссылке 1, то есть в cssString[1], а не в cssString.
Однако я бы также внес небольшое изменение, чтобы сделать ваше регулярное выражение более надежным:
/<style[^>]*>([^<]+)</style>/i
Здесь мы сопоставляем «все, что не является <» в обратной ссылке в скобках. Поскольку код внутри тегов стиля может занимать более одной строки, .* или .+ - не лучший способ сопоставить «все», поскольку в JavaScript точка не соответствует разрывам строк. Вместо этого вы можете использовать отрицательные классы символов. Чтобы соответствовать абсолютно чему угодно, используйте [\s\S]* (ничего, ни одного или как можно больше раз) или [\s\S]+ (хоть один раз и столько раз, сколько возможно). Однако здесь вы хотите убедиться, что матч остановится на следующем <. Я убрал вопросительный знак, потому что вам не нужно делать поиск ленивым, если регулярное выражение не может перескочить через следующий <.
Обновлено: Я только что понял, что вы используете глобальный флаг, который немного меняет ситуацию. Вышеуказанный ответ предполагает одно совпадение без флага /g. Вскоре добавлю некоторую информацию о глобальном сопоставлении.
Итак, чтобы перебрать все элементы <style> в документе, которого может быть несколько, с вашим регулярным выражением вам нужно сделать что-то вроде этого:
var styleMatchRegExp = /<style[^>]*>([^<]+)</style>/ig;
var match = styleMatchRegExp.exec(rawHtml);
var cssStringArray = [];
while (match != null) {
cssStringArray.push(match[1]);
match = styleMatchRegExp.exec(rawHtml);
}
В итоге вы получите массив (cssStringArray), содержащий CSS в каждой из групп <style>...</style> в вашем документе.
Этот ответ очень помог мне понять мою проблему. Спасибо.
Намного проще с парсером dom.