Как получить текст внутри тега <a href> без ссылки в href, с помощью Puppeteer

Question

Я пытаюсь очистить некоторую дату внутри тега, но я не хочу получить ссылку, которая находится внутри него.

Не совсем уверен, как решить проблему, поскольку у тегов нет идентификаторов иликлассы

<div id="list-section">
    <ul>
        <li data-store-id="1234">
            <div class="item">
                <p>
                    <strong>
                    <a target="_blank" href="www.somelink.com"> NAME ONE </a>
                    </strong>
                </p>
            </div>
        </li>
        <li data-store-id="1234">
            <div class="item">
                <p>
                    <strong>
                    <a target="_blank" href="www.somelink.com"> NAME TWO </a>
                    </strong>
                </p>
            </div>
        </li>
    </ul>
</div>

Я пытаюсь получить каждое имя в массиве в конце [ИМЯ ОДИН, ИМЯ ДВА] и т. д.

Редактировать: используя узел с кукловодом

Answer 1

Есть способ найти элементы, которые очень полезны, когда веб-утилизация называется xpath .Никогда не работал с кукловодом, но я недавно много работал с селеном, и я часто использовал xpath.

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

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagexexpression

Из-за того, что у меня нет полной HTML-страницы, я смог создать простой xPath для демонстрации его мощности.

//div[@class='item']//a

Вы можететакже проверьте xpath, открыв Google Chrome DevTools на вкладке " Elements " и нажав CTRL + F

. Это хороший инструмент для просмотра веб-страниц.

Answer 2

Вы можете иметь имена в массиве в два этапа:

• Выберите теги привязки <a>...</a>
• Получите их внутренние HTML

Как уже упоминал Дуглас, вы можете использовать XPath, но в этом случае простые CSS-селекторы отлично справятся со своей задачей.Как селектор CSS, многие комбинации могут дать вам якорные теги: #list-section a, ul a ...

Выберите тот, который подходит вам больше всего и который с наименьшей вероятностью будет тормозить позже.Я рекомендую использовать первый:

const anchorTags = await page.$$("#list-section a")

Что касается получения внутреннего HTML-элемента, этот ТАК вопрос определенно вам поможет.Мой предпочтительный подход состоит в том, чтобы иметь отдельную асинхронную функцию, определенную следующим образом:

async function getInnerHtml(page, target){
  const innerHTML = await page.evaluate(el => el.innerHTML, target)
  return innerHTML
}

Таким образом, вы могли бы зацикливать свой массив и вызывать его для своих тегов привязки.

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

Cheers