jQuery：替换文本不正确

Question

我需要用超链接替换大括号之间的值，并将这些值分配给超链接

var description = "Hello world

This is the first test {f19e7a87-3ae9-40d7-b81a-ad5eba8a2975, First Link}

and some words 

This is the second test {587d2209-fcf2-448d-b52d-7f0c93e59c8c, Second Link}";

我有一个叫做HyperValues的数组

var HyperValues = ["f19e7a87-3ae9-40d7-b81a-ad5eba8a2975, First Link"
                   ,"587d2209-fcf2-448d-b52d-7f0c93e59c8c, Second Link"];

    $.each(HyperValues, function (key, value) {

                    var hyperLinkId = value.split(",")[0];
                    var hyperLinkText = value.split(",")[1];

  description.replace(/\{.+?\}/g, '<a id= ' + hyperLinkId + ' ' + 'class="infoBoxPopup" data-toggle="modal" data-target="#moreInfoModal" href="#"> ' + hyperLinkText + '</a>');

            });

上面的代码很好用，但是问题是用数组中的最新项替换了字符串，我知道我需要另一种替换字符串的方法

这是上面代码的输出

Answer 1

我不是RegEx的专家，但我可以指出逻辑错误。 $ .each以正确的方式循环遍历数组，但是//./?/g将用最新值替换字符串中所有匹配的实例。 理想情况下，当您遍历数组时，需要获得相应的匹配项，例如/{.+?}/g[key]

Answer 2

 var description = `Hello world This is the first test {f19e7a87-3ae9-40d7-b81a-ad5eba8a2975, First Link} and some words This is the second test {587d2209-fcf2-448d-b52d-7f0c93e59c8c, Second Link}`; var HyperValues = ["f19e7a87-3ae9-40d7-b81a-ad5eba8a2975, First Link" ,"587d2209-fcf2-448d-b52d-7f0c93e59c8c, Second Link"]; $.each(HyperValues, function (key, value) { var hyperLinkId = value.split(",")[0]; var hyperLinkText = value.split(",")[1]; //generate regular expression dynamically //and test string ends with hyperLinkText + '}' var Reg = new RegExp('\\\\{.+?\\\\' + $.trim(hyperLinkText) + '}','g'); description = description.replace(Reg, '<a id= ' + hyperLinkId + ' ' + 'class="infoBoxPopup" data-toggle="modal" data-target="#moreInfoModal" href="#"> ' + hyperLinkText + '</a>'); }); $('body').html(description) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body></body> 

这是您想要的结果吗？

---

 var description1 = `Hello world This is the first test {f19e7a87-3ae9-40d7-b81a-ad5eba8a2975, First Link} and some words This is the second test {587d2209-fcf2-448d-b52d-7f0c93e59c8c, Second Link}`; var HyperValues = ["f19e7a87-3ae9-40d7-b81a-ad5eba8a2975, First Link" ,"587d2209-fcf2-448d-b52d-7f0c93e59c8c, Second Link"]; $.each(HyperValues, function (key, value) { var hyperLinkId = value.split(",")[0]; var hyperLinkText = value.split(",")[1]; // generate regular expression dynamically // and test string ends with hyperLinkText + '}' // this regular is the something like /\\{.+?First Link\\}/g or /\\{.+?Second Link\\}/g // so for HyperValues[0] it will match '{f19e7a87-3ae9-40d7-b81a-ad5eba8a2975, First Link}' only // for HyperValues[1] it will match '{587d2209-fcf2-448d-b52d-7f0c93e59c8c, Second Link}' only var Reg = new RegExp('\\\\{.+?\\\\' + $.trim(hyperLinkText) + '}','g'); description1 = description1.replace(Reg, '<a id= ' + hyperLinkId + ' ' + 'class="infoBoxPopup" data-toggle="modal" data-target="#moreInfoModal" href="#"> ' + hyperLinkText + '</a>'); }); var description2 = `Hello world This is the first test {f19e7a87-3ae9-40d7-b81a-ad5eba8a2975, First Link} and some words This is the second test {587d2209-fcf2-448d-b52d-7f0c93e59c8c, Second Link}`; var HyperValues2 = ["f19e7a87-3ae9-40d7-b81a-ad5eba8a2975" ,"587d2209-fcf2-448d-b52d-7f0c93e59c8c"];// remove Fist Link and Second Link $.each(HyperValues2, function (key, value) { var hyperLinkId = value.split(",")[0]; var hyperLinkText = value.split(",")[1];//because remove Fist Link and Second Link this will be undefined // because hyperLinkText is undefined now, then $.trim(hyperLinkText) = "" is just a empty string // so the reg below just work like the same as you wrote before /\\{.+?\\}/g // and it can't work of course // var Reg = new RegExp('\\\\{.+?\\\\' + $.trim(hyperLinkText) + '}','g'); // now we can try to match the text by hyperLinkId // when it's HyperValues2[0] this reg work like /\\{f19e7a87-3ae9-40d7-b81a-ad5eba8a2975.+?\\}/g // and will match {f19e7a87-3ae9-40d7-b81a-ad5eba8a2975, First Link} // when it's HyperValues2[1] this reg work like /\\{587d2209-fcf2-448d-b52d-7f0c93e59c8c.+?\\}/g // and will match {587d2209-fcf2-448d-b52d-7f0c93e59c8c, Second Link} var Reg = new RegExp('\\\\{' + $.trim(hyperLinkId) + '.+?\\\\}','g'); description2 = description2.replace(Reg, '<a id= ' + hyperLinkId + ' ' + 'class="infoBoxPopup" data-toggle="modal" data-target="#moreInfoModal" href="#"> ' + hyperLinkText + '</a>'); }); $('#1').html(description1) $('#2').html(description2) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="1"></div> <div id="2"></div> </body> 

Answer 3

您的正则表达式模式将匹配两项，因此您需要HyperValues数组中的第一项来替换字符串中的第一项匹配项。 上面的代码未将每个正则表达式匹配项都替换为新文本。

另外，由于match（）返回一个数组，因此您可以仅使用forEach（）对其进行循环，而无需jQuery。

var desc = 'Hello world This is the first test {f19e7a87-3ae9-40d7-b81a-ad5eba8a2975, First Link} and some words This is the second test {587d2209-fcf2-448d-b52d-7f0c93e59c8c, Second Link}';

var HyperValues = [
  "f19e7a87-3ae9-40d7-b81a-ad5eba8a2975, First Link",
  "587d2209-fcf2-448d-b52d-7f0c93e59c8c, Second Link"
];

desc.match(/\{.*?\}/g).forEach(function(match, i) {
  var singleHyperValue = HyperValues[i].split(",");
  desc = desc.replace(
    match,
    '<a id="' + singleHyperValue[0] + '" class="infoBoxPopup" data-toggle="modal" data-target="#moreInfoModal" href="#">' + singleHyperValue[1] + '</a>'
  );
})

工作提琴： https ://jsbin.com/coxavusoge/edit ? html, js，输出