javascript - 替换文本区域中多次出现的字符串 (url)

Question

可能我无法实现这一目标，因为我对正则表达式了解不多。

我有一系列独特的链接uniqueLinks。

每当这些链接出现在我的文本区域的 HTML 代码中时，我希望将它们替换为 {{tracking_link_N}}，其中 N 代表键。现在，当按下按钮时，我会调用以下函数

function detect_links() {
var links = [];
var uniqueLinks = [];
var html = $("textarea[name=html]").val();

// Getting all the links in the textarea to replace them
$(html).find('a').each(function() {
    links.push($(this).attr('href'));
})

// Creating an array of unique links uniqueLinks
$.each(links, function(i, el) {
    if ($.inArray(el, uniqueLinks) === -1) uniqueLinks.push(el);
});

$.each(uniqueLinks, function(key, value) {
        var newHTML = $("textarea[name=html]").val().replace(value, '{{tracking_link' + key + '}}');
        $("textarea[name=html]").val(newHTML);
});
}

我的文本区域是:

<textarea name="html" class="form-control" rows="15"></textarea>

到目前为止，此代码仅替换文本区域中第一次出现的 URL。但在某些情况下，同一 URL 会在文本区域中多次出现。例如

<a href="http://google.co.uk">Google</a>
<a href="http://google.com">Google 2</a>
<a href="http://google.co.uk">Google 3</a>

我的代码返回

<a href="http://google.co.uk">{{tracking_link0}}</a>
<a href="http://google.com">{{tracking_link1}}</a>
<a href="http://google.co.uk">Google 3</a>

它应该返回

<a href="http://google.co.uk">{{tracking_link0}}</a>
<a href="http://google.com">{{tracking_link1}}</a>
<a href="http://google.co.uk">{{tracking_link0}}</a>

我尝试阅读其他讨论的是更改 replace() 函数，如下所示

replace(/value/g, '{{tracking_link' + key + '}}');

但我没有得到任何明显的结果。

我的 URL 也包含参数，例如:

http://tracking.testapp.com/affil?offer=105&id=1152

感谢您为解决此问题提供的任何帮助。

PS:解释你对问题的反对票会让它们更可信

Answer 1

/value/g 表示全局搜索精确的字符串"value"。您想要的是它全局搜索 value 变量的值。为此，您必须使用 RegExp() 以便 JavaScript 解析 value 来表示变量 value 的值，而不是字符串 “值”。

var newHTML = $("textarea[name=html]").val().replace(new RegExp(escapeRegExp(value), "g"), '{{tracking_link' + key + '}}');

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

将其添加到 JavaScript 代码中的某个位置(取自 this post ):

escapeRegExp = function(text) {
  return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
};