jQuery的：替換文本是不正確的

我需要用超鏈接替換大括號中的數值，並指定這些值的超鏈接jQuery的：替換文本是不正確的

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

      });

以上代碼效果很好，但問題是用陣列中的最新項替換字符串我知道我需要另一種方法來替換字符串

這是在正則表達式，上面的代碼

來源

2017-08-15 Alex

Im不專家的輸出，但我可以查明的邏輯錯誤。 $ .each以正確的方式遍歷數組，但是/{.+?}/g將用字符串中的所有匹配實例替換最新值。理想情況下，你需要在陣列上得到相應的匹配出現，你循環，像/{.+?}/g[key]

來源

2017-08-16 00:10:05 DPatel

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>

來源

2017-08-16 01:17:40 MinimalistYing

非常感謝你的幫助:)你的代碼工作得很好，但我有一個非常小的問題什麼，如果VAR HyperValues = [ 「f19e7a87-3ae9- 40d7-b81a-ad5eba8a2975「，」587d2209-fcf2-448d-b52d-7f0c93e59c8c「 ]; 我試過後續註冊，但它沒有工作 var Reg = new RegExp（'\\ {。+？\\'+ $ .trim（hyperLinkText）+'}'，'g'）; 您能否告訴我這種情況下正確的Reg格式 – Alex

@Alex我編輯我的答案。我爲您推薦[regexper]（https://regexper.com/），您可以在其中直觀地測試您的正則表達式。 – MinimalistYing

，所以你需要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

來源

2017-08-16 01:23:37

jQuery的：替換文本是不正確的

回答

相關問題