Блог

Главная - Вопросы по программированию - Отдельная строка с HTML-тегом с помощью Javascript

Отдельная строка с HTML-тегом с помощью Javascript

#javascript #jquery

#javascript #jquery

Вопрос:

 var str = '<h1>Header</h1><p>Paragraph</p>

У меня есть строка str
Я хочу отделить h1 и p текст.

Результат:

 var h = 'Header'
var p = 'Paragraph'

Есть ли какой-нибудь короткий способ?
Я попробовал это с помощью цикла for.

Комментарии:

1. $.parseHTML( str ) api.jquery.com/jquery.parsehtml

2. Одним из способов было бы использовать метод .match с регулярным выражением. и ot перехватывать элемент между разными тегами

Ответ №1:

Вот так, без манипуляций со строками:

 const str = '<h1>Header</h1><p>Paragraph</p>'
const div = document.createElement('div');
div.innerHTML = str;
const [h, p] = [...div.children].map(el=>el.textContent);

console.log(h, p);

Или еще чище, используя экспериментальный DOMParser API:

 const doc = new DOMParser().parseFromString('<h1>Header</h1><p>Paragraph</p>', 'text/html');
const [h, p] = [...doc.body.children].map(el=>el.textContent);

console.log(h, p);

Комментарии:

1. Это потрясающе!

Ответ №2:

Использование jQuery:

 var str = '<h1>Header</h1><p>Paragraph</p>'
var h = $.parseHTML( str )[0].innerText
var p = $.parseHTML( str )[1].innerText

Ответ №3:

Попробуйте регулярное выражение:

 var str = '<h1>Header</h1><p>Paragraph</p>';
var result = str.match(/<([w] )[^>]*>(.*?)</([w] )[^>]*>/g).map(function(val){
    var pre = val.split('>')[1];
    return pre.substr(0, pre.lastIndexOf('<'));
});
console.log(JSON.stringify(result));

Комментарии:

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