如何将副本与括号匹配 Javascript

Question

I'm trying to find a specific Product Name on a page, and if this matches then I want to add " - 10% Discount" at the end of this name.

The issue I have is at the end of the Product Name I have in parentheses "(1+1)" how can I include this in the variable findCopy so my outcome will be: "Product Name (1+1) - 10% Discount"

 var findCopy = 'Product Name'; // The below is what I'm trying to achieve to get // var findCopy = 'Product Name (1+1)'; var targetThis = document.querySelector('.copy'); targetThis.innerText = targetThis.textContent.replace(new RegExp(findCopy), findCopy + ' - 10% Discount');

 <p class="copy">Product Name (1+1)</p>

Answer 1

You know the product name like Product Name (1+1) , so you need to find the tag has the same value and then append it - 10% Discount

 var findCopy = 'Product Name (1+1)'; // The below is what I'm trying to achieve to get // var findCopy = 'Product Name (1+1)'; var targetThis = [...document.querySelectorAll('.copy')].filter(tag => tag.textContent.includes(findCopy))[0] targetThis.innerText = targetThis.textContent + ' - 10% Discount';

 <p class="copy">Product Name (1+1)</p>

Update without spread operator :

 var findCopy = 'Product Name (1+1)'; // The below is what I'm trying to achieve to get // var findCopy = 'Product Name (1+1)'; var array = document.querySelectorAll('.copy'); var targetThis; for (var i = 0; i < array.length; i++) { if (array[i].textContent.includes(findCopy)) targetThis = array[i]; } targetThis.innerText = targetThis.textContent + ' - 10% Discount';

 <p class="copy">Product Name (1+1)</p>

Answer 2

Heavily based on Alireza Ahmadi solution, but allowing you to change several products at once:

 var findCopy = 'Product Name'; // The below is what I'm trying to achieve to get // var findCopy = 'Product Name (1+1)'; var targetThis = [...document.querySelectorAll('.copy')].filter(tag => tag.textContent.includes(findCopy)) targetThis.forEach(el => el.innerText = el.textContent + ' - 10% Discount');

 <ol> <li class="copy">Product Name (1+1)</li> <li class="copy">Product (1+1)</li> <li class="copy">Product Name</li> <li class="copy">(1+1) Product Name</li> <li class="copy">Potato</li> </ol>

Answer 3

I don't know whether you can use jQuery or not. Here I did a solution using jQuery. Of course it works for multiple

and change them all

HTML:

<div class="new">
        <p>
            product Name 1
        </p>
        <p>
            product Name 2
        </p>
        <p>
            product Name 3
        </p>
        <p>
            product Name 1 abcde
        </p>
    </div>
<button onclick="test('product Name 1')">test</button>

JS code:

function test(string) {         
                $("p:contains('" + string + "')").each(function () {
                    var sHtml = $(this).html();
                    $(this).html(sHtml + " - 10% Discount");
                })
        }

Finally it will change the content like below:

product Name 1 - 10% Discount

product Name 2

product Name 3

product Name 1 abcde - 10% Discount