1

Нужно составить регулярное выражение, которое осуществляет в строке поиск тега и забирает все его классы.

Есть строка (весь HTML страницы), нужно в этой строке найти тег body и вывести его классы. Строка начинается с <!DOCTYPE, но find и прочие не работают. Поэтому и думал регуляркой вытащить.

12
  • 1
    А зачем Вам регулярное выражение? Чтобы получить классы какого-либо тега (допустим, body), достаточно $('body').attr('class'). 20 авг 2017 в 6:06
  • у меня у переменной содержащей весь html тип строка. если использовать всякие find или attr то пишет - "is not a function"
    – DexColt
    20 авг 2017 в 6:18
  • @DexColt find может быть применен, если этот html будет обернут в какой-нибудь тег еще. Хотя если эта строка начинается с тега html, то должно работать и так 20 авг 2017 в 6:24
  • начинается с <!DOCTYPE но find и прочие не работают. Поэтому и думал регуляркой вытащить
    – DexColt
    20 авг 2017 в 6:27
  • какую ты задачу решаешь в принципе? откуда у тебя html в виде строки и зачем тебе нужны классы тега из этой строки и почему вообще html в виде строки в js? 20 авг 2017 в 6:31

1 ответ 1

1

Как правило, использовать регулярные выражения для поиска какого-либо элемента в HTML структуре - плохая затея. Поэтому обычно пользуются парсингом.

Воспользоваться методом jQuery.parseHTML в данном случае не получится, так как при его использовании тег body удаляется из результата.

Однако при валидной структуре документа можно воспользоваться jQuery.parseXML для создания полной структуры, в которой уже можно будет найти body с помощью find:

var html = "<!DOCTYPE html><html><body class='one two'><p></p></body></html>";
var xmlDoc = $.parseXML(html);
console.log($(xmlDoc).find("body").attr("class"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


При желании можно обойтись и без jQuery:

var html = "<!DOCTYPE html><html><body class='one two'><p></p></body></html>";
var parser = new DOMParser();
var htmlDoc = parser.parseFromString(html, "text/html");
console.log(htmlDoc.body.classList);


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

В данном примере представленное рег. выражение отработает как нужно:

var html = "<!DOCTYPE html><html><body id='x' class='one two'><p class='three'></p></body></html>";
var match = html.match(/<body.*?class=("|')(.*?)("|')/i);
console.log(match[2]);

4
  • Спасибо за столь развернутый ответ!
    – DexColt
    20 авг 2017 в 7:45
  • А в каких случаях регулярка не отработает как нужно? Парсинг не пашет у меня.
    – DexColt
    20 авг 2017 в 8:18
  • @DexColt парсинг валится с ошибкой? Если "да", то, возможно, у вас в HTML (который в строке) есть скрипты, которые не вынесены в файл, а вставлены прямо в страницу. Такие скрипты и парсинг могут быть испортить, и работу рег. выражения. Пример такой ситуации.
    – Regent
    20 авг 2017 в 8:50
  • да, скрипты есть, CMS вставляет. Вы очень круто помогли мне, за что огромное спасибо.
    – DexColt
    20 авг 2017 в 9:02

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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