Прекрасная проблема Супа, получая вложенный HTML

Question

Используя Красивый суп, я не могу захватить ВСЕ элементы HTML. В частности, я пытаюсь получить значение 4 в

    <button class="css-812ha7 " type="button">4</button>

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

Код:

soup.select('.css-rs2cuv')

Возвращает:

[
     <div class="css-rs2cuv">
         <button class="css-rzdbbc" type="button">
             <svg class="css-1jc5boz" viewbox="0 95 57 95">
                 <path d="M57 142.5L9.5"></path>
             </svg>
         </button>
         <button class="css-rzdbbc" type="button">
             <svg class="css-15yx468" viewbox="0 95 57 95">
                 <path d="M57 142.5L9.5 95 0 104.5l38"></path>
             </svg>
         </button>
     </div>
]

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

HTML я разбираю:

<div class="css-rs2cuv">
    <button class="css-rzdbbc" type="button">
        <svg viewBox="0 95 57 95" class="css-1jc5boz">
             <path d="M57 142.5L9.5"></path>
        </svg>
    </button>
    <button class="css-10po51q " type="button">1</button>
    <button class="css-812ha7 " type="button">2</button>
    <button class="css-812ha7 " type="button">3</button>
    <div class="css-ufx8pa " data-comp="Flex Box">...</div>
    <button class="css-812ha7 " type="button">4</button>
    <button class="css-mnn3vx " type="button">
        <svg viewBox="0 95 57 95" class="css-15yx468 ">
            <path d="M57 142.5L9.5 95 0 104.5l38"></path>
        </svg>
    </button>
</div>

Answer 1

Недостаточно html, чтобы указать, нужно ли вам использовать select или select_one (select_one вернет первое совпадение), но для показанного html вы можете использовать связь между атрибутом элемента перед желаемым (указав attribute = value селектор из [data-comp='Flex Box']), в соседней комбинации одного брата с классом элемента, который вы хотите получить. + - это соседний братский комбинатор .

С несколькими совпадениями для этой комбинации селекторов css, и, если не первая, select может использоваться для получения всех совпадений; Вы можете индексировать это, чтобы получить конкретный элемент.

В этом сценарии использование только имени класса в качестве селектора почти наверняка будет быстрее, но стоит знать о других методах.

from bs4 import BeautifulSoup
html="""
<div class="css-rs2cuv">
    <button class="css-rzdbbc" type="button">
        <svg viewBox="0 95 57 95" class="css-1jc5boz">
             <path d="M57 142.5L9.5"></path>
        </svg>
    </button>
    <button class="css-10po51q " type="button">1</button>
    <button class="css-812ha7 " type="button">2</button>
    <button class="css-812ha7 " type="button">3</button>
    <div class="css-ufx8pa " data-comp="Flex Box">...</div>
    <button class="css-812ha7 " type="button">4</button>
    <button class="css-mnn3vx " type="button">
        <svg viewBox="0 95 57 95" class="css-15yx468 ">
            <path d="M57 142.5L9.5 95 0 104.5l38"></path>
        </svg>
    </button>
</div>
"""
soup = BeautifulSoup(html,'lxml')
print(soup.select_one("[data-comp='Flex Box'] + .css-812ha7").text)

Answer 2

select возвращает список всех тегов, соответствующих этому тегу. Вы можете использовать индекс для этого списка, чтобы получить необходимый тег, а затем использовать .text, чтобы получить текст внутри.

from bs4 import BeautifulSoup
html="""
<div class="css-rs2cuv">
    <button class="css-rzdbbc" type="button">
        <svg viewBox="0 95 57 95" class="css-1jc5boz">
             <path d="M57 142.5L9.5"></path>
        </svg>
    </button>
    <button class="css-10po51q " type="button">1</button>
    <button class="css-812ha7 " type="button">2</button>
    <button class="css-812ha7 " type="button">3</button>
    <div class="css-ufx8pa " data-comp="Flex Box">...</div>
    <button class="css-812ha7 " type="button">4</button>
    <button class="css-mnn3vx " type="button">
        <svg viewBox="0 95 57 95" class="css-15yx468 ">
            <path d="M57 142.5L9.5 95 0 104.5l38"></path>
        </svg>
    </button>
</div>
"""
soup=BeautifulSoup(html,'html.parser')
print(soup.select('.css-812ha7')[2].text)

выход

4