jquery：替换文本不正确答案

【问题标题】：jquery: Replacing text is not correctjquery：替换文本不正确
【发布时间】：2017-08-15 23:19:57
【问题描述】：

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

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

            });

上面的代码运行良好，但问题是字符串替换为最新的数组中的项目我知道我需要另一种方法来替换字符串

这是上面代码的输出

【问题讨论】：

标签： javascript jquery ecmascript-6

【解决方案1】：

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

【讨论】：

【解决方案2】：

您的正则表达式模式将匹配两个项目，因此您需要 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,output

【讨论】：

【解决方案3】：

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>

【讨论】：

非常感谢您的帮助 :) 您的代码运行良好，但我有一个非常小的问题，如果 var HyperValues = [ "f19e7a87-3ae9-40d7-b81a-ad5eba8a2975", " 587d2209-fcf2-448d-b52d-7f0c93e59c8c" ];我尝试了以下注册但它没有工作 var Reg = new RegExp('\\{.+?\\' + $.trim(hyperLinkText) + '}','g');你能告诉我这个案例的正确 Reg 格式吗
@Alex 我编辑了我的答案。我为您推荐regexper，您可以在其中直观地测试您的正则表达式。