Formatting the string result of text()

Question

Good day, do anyone know how to format or add some extra string (like a comma),to the results given by text()? I am using it in web scraping.

Here's the snippet of the scraper:

var makeupCatBrand = $('span.caption').children('h6').text().trim()

Here's the result when I use console.log(makeupCatBrand):

Jeffree StarCharlotte TilburyRCMA MakeupNatasha DenonaAnna SuiJeffree StarSugarpillAnna SuiArmour BeautyOCCSugarpillCover FXIT Cosmetics rms beautyMake-Up AtelierCover FXCover FXIT Cosmetics beautyblenderBY TERRYKevyn AucoinbeautyblenderIT Cosmetics Charlotte TilburyBY TERRYCover FXViseartCover FXWayne GossRCMA MakeupAnna SuiAnna SuiCover FXOCCAnna SuiCharlotte Tilbury

I tried pushing it to an array, but all of that shows only as one index in the array.

I would like to add at least a comma per brand (Jeffree Star, Charlotte Tilbury, etc) so that i can easily split it before pushing to an array. Any answer or idea is greatly appreciated

Oh, they all have the same class, no ID, that's why it will be quite hard if I were to scrape them one by one

Here's the html code of two of the brand (all of them had the same format, so I only include one, the only change if a product with that brand had two or more available shades):

<li class="shop_t_browse">
    <a class="tile" href="/p/jeffree-star-velour-liquid-lipstick" >
        <span class="img txt_c">
            <img class="inlineblock"     src="//dy6g3i6a1660s.cloudfront.net/eNiRpXtM7WlLKE7qyhAw4AR-BH4/320_p-cd/jeffree-star-velour-liquid-lipstick.jpg" alt="Jeffree Star Velour Liquid Lipstick" />
        </span>
        <span class="caption">

            <h6>Jeffree Star</h6>
            <h5>Velour Liquid Lipstick</h5>
            <p><strong>$18 USD</strong></p>
            <small class="shop_msg_color">
                24 shades available
            </small>
            <small class="rating_reviews txt_pale hidden_mobile">
                <div class="ratingInfo">
                    <span class="rating_image_small" style="background-position: 0 -250.0000000000px;"></span>
                    <span class="txt_pale glyph_stat"> / 674</span>
                </div>
            </small>
        </span>
    </a>
</li>

Answer 1

As of what I see you can, since you seem to have multiple children, go through each of them separately.

So this is how it could work.

var makeupCatBrand;
$('span.caption').children('h6').each(function(){
    makeupCatBrand += $(this).text().trim();
    makeupCatBrand += ", ";
})