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将用最新的值替换string中的所有匹配实例。理想情况下，当您遍历数组时，需要获得相应的匹配匹配项，例如/{.+?}/g [key]

Answer 2

＆＃13;

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)

＆＃13;

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

＆＃13;

这个结果是你想要的吗？

＆＃13;

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)

＆＃13;

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

＆＃13;

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,output

jquery：替换文本不正确

3 个答案: