Question

可能我无法做到这一点，因为我对regEx一无所知。

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

每当这些链接出现在HTML代码中我都有我的textarea时，我希望将它们替换为{{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是：

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

到目前为止，这个代码只替换了textarea中第一次出现的URL。但是，在某些情况下，相同的URL会在textarea中多次出现。 E.g。

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

但我没有得到任何可观的结果。

我的网址也包含参数，例如：

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

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

PS：解释你给问题的downvotes让他们更可信

Answer 1

/value/g表示全局搜索确切的字符串"value"。您想要的是全局搜索value变量的值。为此，您必须使用RegExp()，以便JavaScript解析value以表示变量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, "\\$&");
};

Answer 2

您的问题是因为replace()方法仅在您为其提供字符串值时才对第一个找到的实例起作用。相反，如果您为其设置了一个正则表达式并设置了全局标志（g），那么它将查找并替换所提供值的所有实例。

另请注意，您可以通过将函数传递给val()来使代码更简洁。试试这个：

var uniqueLinks = ['http://google.co.uk', 'http://google.com'];

$.each(uniqueLinks, function(key, value) {
  var re = new RegExp(value, 'gi');
  $("textarea[name=html]").val(function(i, v) {
    return v.replace(re, '{{tracking_link' + key + '}}');
  });
});

textarea {
  width: 100%;
  height: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea name="html"><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>
</textarea>

Answer 3

var uniqueLinks = ['http://google.co.uk', 'http://google.com'],
    textArea=$("textarea[name=html]"),
    text=textArea.text();

$.each(uniqueLinks, function(key, value) {
  var re = new RegExp('"'+value+'">([^<]*)</',"g");
  text=text.replace(re,'"'+value+'">{{tracking_link'+key+'}}<');
});

console.log(text);
textArea.text(text);

textarea {
  width: 100%;
  height: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea name="html"><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>
</textarea>

这将取代链接中的文字

替换textarea

3 个答案: