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

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

            });

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

这是上面代码的输出

上面代码的输出

#1楼 票数:0

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

#2楼 票数:0

 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> 

#3楼 票数:0

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

  ask by Alex translate from so

未解决问题?本站智能推荐:

1回复

多个图表上的共享工具提示格式不正确

我在一个容器中有多个 highcharts,并希望为其使用共享工具提示。 我能够生成共享工具提示,因为我无法将其格式化为我想要的格式。 这是我的代码: Highcharts.chart('container', { yAxis: [{ title: { text: 'Pressure' },
2回复

用VanillaJS而不是jQuery用另一个html文件('common/...html)的内容替换div

我希望能够编写以下内容而无需导入 jQuery 库,以便将 div 替换为在另一个 html 文件中编写的组件的内容: <head> <script src="https://code.jquery.com/jquery-1.10.2.js"></script&
1回复

如何使用jQuery将多个选择框值和文本放在一起?

我有一个选择框,用户可以选择多种颜色,所以我想使用以下代码获取所选选项的值和文本我只获取文本或只获取值但我想要两者 它给了我这个 顺便说一句“نارنجی روشن”和......是颜色名称
2回复

如何替换startsWith()函数的结果?

这是我的代码吗? 这是预期的结果: [twitter, instagram] 。 所以我需要在.startsWith()函数的末尾链接.replace() .startsWith()函数。 像这样: 但是它抛出: 未捕获的TypeError:c.startsWith(...)。
1回复

绑定到jQuery函数问题

我在EcmaScript 6类中使用JQuery,并且有一个事件函数可在类的实例化时触发,并且该事件包含需要与Class进行交互的不同JQuery事件,因此我执行.bind()来实现这一点,可以正常工作,除了一个事件,由于某种原因,该事件用.bind(that)方法传递的“ that”覆盖了属于
2回复

与es6类和jquery绑定

在项目上工作我注意到,当通过jquery调用访问时,类方法中的this实际上并没有真正附加到实例,甚至类。 相反,它是我所看到的全球window ,这是不对的。 所以有各种各样的方法来为你自动提出..我尝试了几个,而且 - 没有成功。 到底是怎么回事? 这是错误: 这是我的aut
2回复

JSDOM和jQuery没有一起工作

我对测试环境很新,比如mocha和chai,我想通过以下在线教程进行练习,但似乎它不喜欢我的工作并给我一个错误说: 我的test_helper看起来像, 我想知道任何人都有类似我的问题,并知道如何解决这个问题。 由于我对这个主题并不熟悉,所以我不确定如何调试它。 这是我实现cons
2回复

表未从对象数组正确填充

我有一个对象数组。 我想用对象数组中的值填充我的表: 这是我的代码: let data = [ {cat: 'one', device: 'iphone', site: 'google', val1:10, val2:20, val3:30}, {cat: 'two', device: 'i