美丽的汤麻烦嵌套HTML

Question

Using Beautiful soup, I can't seem to capture ALL of the HTML elements. Specifically, I aim to try to get the 4 value in

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

but I am having trouble doing so using beautiful soup because I can't capture the nested tags

Code:

soup.select('.css-rs2cuv')

Returns:

[
     <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>
]

I thought my line of code would return all the tags and nested tags and then I can just run more methods to grab my desired value

HTML I am parsing:

<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

select returns a list of all tags matching that tag.You can use an index to this list to get your required tag and then use .text to get the text inside.

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)

Output

4

Answer 2

Not enough html to tell if you would need to use select or select_one ( select_one will return first match), but for html shown you can use the relationship between the attribute of the element before the desired one (by specifying an attribute=value selector of [ data-comp='Flex Box'] ) , in adjacent sibling combination with the class of the element you want to grab. The + is an adjacent sibling combinator .

With multiple matches for this css selector combination, and where not the first, select can be used to retrieve all matches; you can index into that to retrieve a specific item.

In this scenario using class name alone, as a selector, would almost certainly be quicker but worth being aware of other methods.

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)