将元素/类添加到 javascript/jquery 字符串中的第一个唯一单词

Question

I want to insert a tag from the first unique word from a string using javascript / jquery. It is something like:

 jQuery(document).ready(function($){ $(".product_title:contains(NEW)").replace('NEW', '<span class="new">NEW</span>'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> FROM: <h2 class="product_title">NEW Jeep Wrangler</h2> INTO: <h2 class="product_title"><span class="new">NEW</span>Jeep Wrangler</h2> FROM: <h2 class="product_title">REBUILT Jeep Wrangler</h2> INTO: <h2 class="product_title"><span class="rebuilt">REBUILT</span>Jeep Wrangler</h2>

I tried below approach to replace the first word with html code but didn't work: I received a Uncaught TypeError: $(...).replace is not a function on console.

How to achieve this? I can't find any examples on the web that is applying this similar approach. Please advise.

UPDATE: I think I'm close, I use below approach:

$('.product_title').each(function() {
    var text = $(this).text();
    $(this).text(text.replace('NEW', '<span class="cust-woo-title-tag-new">NEW</span>')); 
});

But the tags are displaying on the front end.

Answer 1

Something like this could work:

$('h2').each((i)=>{
 txt=$(i).text().split(' ')
i_html = `
<span class ='${txt[0]}.toLocaleLowerCase()' >${txt.pop(0)}</span> ${txt.join(' ')}
`
$(i).html(i_html)
})

If you just want to do it for certain words, create a array with them and check with keywords.include(txt[0])

Answer 2

1. get all the product_title that contains "NEW"
2. store the previous html value (eg. NEW Jeep Wrangler )
3. remove the "NEW" word ( NEW Jeep Wrangler becomes Jeep Wrangler)
4. update the innerHTML

    $(document).ready(function($){ //get all the product_title that contains "NEW" let contains_new = $(".product_title:contains(NEW)"); for(let x = 0; x < contains_new.length; x++) { //store the previous html value let prev_html = contains_new[x].innerHTML; //remove the "NEW" word in the prev_html let new_html = prev_html.replace('NEW',''); //update the inner html contains_new[x].innerHTML = `<span class"new">NEW</span>${new_html}`; } });

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2 class="product_title">NEW Jeep Wrangler</h2> <h2 class="product_title">NEW Jeep Wrangler</h2>

try to inspect element the result to view the html structure.