Get text with javascript textContent

Question

I try to get text from a site, using javascript and textContent

i use this code

var markets=document.getElementsByClassName('sip-MarketGroup ')
for (var i=0;i<markets.length;i++){
    try {
       console.log(markets[i].textContent);
    } catch (error) {
       console.error(error);
    }
}

           

a part of html into the site is this below

<div class="sip-MarketGroup">
    <div class="sip-MarketGroupButton sip-MarketGroup_Open ">
        <div class="sip-MarketGroupButton_Text " style="">Fulltime Result</div>
        <div class="sip-MarketGroupButton_FavouriteButton sip-FavouriteButton ">
            <div class="sip-FavouriteButton_SVG "> </div>
        </div>
    </div>
    <div class="gl-MarketGroup_Wrapper ">
        <div class="gl-MarketGroupContainer ">
            <div class="gl-Market gl-Market_General gl-Market_General-topborder gl-Market_General-pwidth100 ">
                <div class="gl-Participant gl-Participant_General gl-Market_General-cn3 ">
                    <span class="gl-Participant_Name">QPR</span>
                    <span class="gl-Participant_Odds">12.00</span>
                </div>
                <div class="gl-Participant gl-Participant_General gl-Market_General-cn3 ">
                    <span class="gl-Participant_Name">Draw</span>
                    <span class="gl-Participant_Odds">4.00</span>
                </div>
                <div class="gl-Participant gl-Participant_General gl-Market_General-cn3 ">
                    <span class="gl-Participant_Name">Bournemouth</span>
                    <span class="gl-Participant_Odds">1.36</span>
                </div>
            </div>
        </div>
    </div>
</div>

and i get

Fulltime ResultQPR12.00Draw4.00Bournemouth1.36

without spaces, how can i get this text but seperated with ";"like this

Fulltime Result;QPR 12.00;Draw 4.00;Bournemouth 1.36;

Answer 1

You are going to have to select all the elements you want text from. Multiple ways to do it, the easiest is just to select the elements you want and loop over them.

 var groups = document.querySelectorAll(".sip-MarketGroup"); const groupText = Array.from(groups).map(function (group) { const elems = group.querySelectorAll('.sip-MarketGroupButton_Text,.gl-Participant_Name, .gl-Participant_Odds'); const text = Array.from(elems).map(function (elem) { return elem.textContent; }).join(";"); return text; }); console.log(groupText);

 <div class="sip-MarketGroup"> <div class="sip-MarketGroupButton sip-MarketGroup_Open "> <div class="sip-MarketGroupButton_Text " style="">Fulltime Result</div> <div class="sip-MarketGroupButton_FavouriteButton sip-FavouriteButton "> <div class="sip-FavouriteButton_SVG "> </div> </div> </div> <div class="gl-MarketGroup_Wrapper "> <div class="gl-MarketGroupContainer "> <div class="gl-Market gl-Market_General gl-Market_General-topborder gl-Market_General-pwidth100 "> <div class="gl-Participant gl-Participant_General gl-Market_General-cn3 "> <span class="gl-Participant_Name">QPR</span> <span class="gl-Participant_Odds">12.00</span> </div> <div class="gl-Participant gl-Participant_General gl-Market_General-cn3 "> <span class="gl-Participant_Name">Draw</span> <span class="gl-Participant_Odds">4.00</span> </div> <div class="gl-Participant gl-Participant_General gl-Market_General-cn3 "> <span class="gl-Participant_Name">Bournemouth</span> <span class="gl-Participant_Odds">1.36</span> </div> </div> </div> </div> </div>