如何将副本与括号 Javascript 匹配答案

【问题标题】：How to match copy with parentheses Javascript如何将副本与括号 Javascript 匹配
【发布时间】：2021-09-19 15:19:48
【问题描述】：

我正在尝试在页面上查找特定的产品名称，如果匹配，那么我想在该名称的末尾添加“- 10% 折扣”。

我遇到的问题是我在括号“（1+1）”中的产品名称末尾如何将其包含在变量findCopy 中，所以我的结果将是：“产品名称（1+1 ) - 10% 折扣"

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');

&lt;p class="copy"&gt;Product Name (1+1)&lt;/p&gt;

【问题讨论】：

为什么要使用正则表达式？你可以only use CSS
因为我在页面上寻找一个特定的产品名称，并且所有名称都具有相同的类，所以我只想在这个产品之后添加10％的折扣副本。
为什么要用replace？ targetThis.innerText = targetThis.textContent + ' - 10% Discount'; 不适合你？
问题是你在这里使用字符串替换并且只用“ - 10％折扣”替换字符串的第一部分，为什么不只用一个if语句来查找产品名称和如果匹配，则将 10% 附加到末尾？
不要认为我的措辞正确。我想基本上找到这个字符串中的内容" : var findCopy = 'Product Name (1+1)'; " 但是在其中添加括号不起作用。那么有没有办法逃避它们或将它们包含在搜索此产品名称中

标签： javascript parentheses

【解决方案1】：

你知道Product Name (1+1)这样的产品名称，所以你需要找到标签具有相同的值，然后附加它- 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';

    &lt;p class="copy"&gt;Product Name (1+1)&lt;/p&gt;

不带扩展运算符的更新：

        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';

 &lt;p class="copy"&gt;Product Name (1+1)&lt;/p&gt;

【讨论】：

谢谢如果没有展开运算符和箭头功能，我该怎么做？我使用的在线 AB 测试工具不允许这样做。
我更新了我的答案。只需您可以使用 for 循环

【解决方案2】：

大量基于 Alireza Ahmadi 解决方案，但允许您一次更改多个产品：

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>

【讨论】：

【解决方案3】：

我不知道你是否可以使用 jQuery。在这里，我使用 jQuery 做了一个解决方案。当然它适用于多个

并全部更改

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代码：

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

最后它会改变如下内容：

产品名称 1 - 10% 折扣

产品名称 2

产品名称 3

产品名称 1 abcde - 10% 折扣

【讨论】：