JavaScript эквивалент php DOMDocument Object - PullRequest
Новая
       38

JavaScript эквивалент php DOMDocument Object

3 голосов
/ 14 апреля 2020

Я написал код в PHP для анализа данных, полученных по запросу API от "wikipedia.org". Я использовал класс DOMDocument для разбора данных, и он работал отлично. Теперь я хочу сделать ту же работу в JavaScript. Запрос API возвращает (после небольшой очистки) строку, подобную этой: 

$htmlString = "<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ul>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>"

Обратите внимание, что это только пример. Любой запрос может иметь разное количество списков, но это всегда серия неупорядоченных списков. Мне нужно было получить текст внутри тегов <li>, и следующий код PHP работал отлично. 

$DOM = new DOMDocument;
$DOM->loadHTML($htmlString);
$lis = $DOM->getElementsByTagName('li');
$items =[];
for ($i = 0; $i < $lis->length; $i++) $items[] = $lis[$i]->nodeValue;

И я получаю массив [Item 1, ..., Item 5] внутри $items переменной, как я хотел. Теперь я хочу сделать ту же работу в JavaScript. То есть у меня есть строка 

htmlString = "<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ul>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>"

в JavaScript, и я хочу получить текст внутри каждого из тегов <li>. Я искал в Интернете эквивалентный класс PHP DOMDocument в JavaScript, и неожиданно ничего не нашел. Любые идеи, как это сделать в (предпочтительно Vanilla) JavaScript аналогично PHP код? Если нет, есть идеи, как это сделать в JavaScript (даже с регулярными выражениями)?

Ответы [ 2 ]

1 голос
/ 14 апреля 2020

Используйте DOMParser ()

Ваш перенесенный код, который очень похож на ваш PHP: 

let parser = new DOMParser()
let doc = parser.parseFromString(`<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ul>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>`, "text/html")


let lis = doc.getElementsByTagName('li')
let items = []
for (let i = 0; i < lis.length; i++) items.push(lis[i].textContent)

console.log(items)
1 голос
/ 14 апреля 2020

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

FYI Я использую синтаксис ES20xx. Если вы не можете это поддержать, вам нужно преобразовать в синтаксис, к которому у вас есть доступ.

Здесь у меня есть выражения, которые фиксируют все, что находится между открытием <ul> или <li> и закрывающие теги. Затем я использую разрывы строк, чтобы разбить строку на массив. Нам нужно отфильтровать пустые элементы из полученного массива и, наконец, вернуть нужные элементы в окончательный массив. 

var htmlString = `<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ul>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>`;

var lis = htmlString.replace(/<ul>|<li>(.*)<\/li>|<\/ul>/g, '$1').split('\n');

var items = lis
    .filter(item => {
        if (item && item !== null && item !== '') {
            return item;
        }
    })
    .map(item => {
        var element = item.replace(/\s{2,}/g, '');

        return element;
    });

console.log('items array.', items);
...