如何用數字鏈接替換數字

Question

我對javascript很新，所以請原諒我在這里缺乏知識。 我在我們的網站上設置了一組餐廳用戶檔案，其中一個多選項是從列表中選擇同一特許經營者擁有的一個或多個商店號碼。 一旦在他們的個人資料中選擇並查看商店編號，我希望他們變成可點擊鏈接到其他個人資料。

換句話說，我希望“4247，31605，46531，59519”變成“ 4247 ， 31605 ， 46531 ， 59519 ”。

我一直在玩jQuery嘗試用鏈接替換商店號碼，但是當它想要用一個鏈接而不是單個鏈接替換所有這些（包括逗號）時就會卡住。 有什么建議？ 這是我到目前為止所擁有的。 我正在使用頁面上顯示內容的直接示例。

<div class="um-field um-field-stores um-field-multiselect um-field-type_multiselect" data-key="stores">
 <div class="um-field-label">
  <label for="stores-7013">Other Shops Owned By This Franchisee</label>
  <div class="um-clear"><a href=""></a></div>
 </div>
 <div class="um-field-area">
 <div class="um-field-value">4247, 31605, 46531, 59519</div>
 </div>
</div>

<script>
(function() { 
    // collect variables
    // you can change this to change which element you replace
    var reference = document.querySelector('.um-field-stores>div:nth-child(2)');
    var text = reference.innerText;
    var numcode = /\d+/g;
    var refnum = text.match(numcode);
    var replacement = text.replace(numcode, "http://example.com/user/shop" + refnum);

    // create new anchor tag
    var a = document.createElement('a');
    a.href = replacement;
    a.innerText = text;

    // do the replacement

    reference.innerHTML = ''; // clear the old contents of the reference
    reference.appendChild(a); // append the new anchor tag into the element
})()
</script>

Answer 1

使用單個正則表達式執行此操作要容易得多：匹配數字，並將每個數字字符串替換為包含在<a>中的數字字符串。 在替換字符串中使用$&來表示匹配的數字（整個初始匹配）：

 const div = document.querySelector('.um-field-stores .um-field-value'); div.innerHTML = div.textContent .replace(/\\d+/g, `<a href="http://example.com/user/shop$&">$&</a>`); 

 <div class="um-field um-field-stores um-field-multiselect um-field-type_multiselect" data-key="stores"> <div class="um-field-label"> <label for="stores-7013">Other Shops Owned By This Franchisee</label> <div class="um-clear"> <a href=""></a> </div> </div> <div class="um-field-area"> <div class="um-field-value">4247, 31605, 46531, 59519</div> </div> </div> 

Answer 2

如果我理解正確，那么我認為解決方案是在您的邏輯中引入一個循環，以便在每個數字的基礎上執行鏈接插入。 這將涉及根據“，”字符拆分輸入字符串（文本），然后迭代結果字符串數組：

(function() { 
    // collect variables
    // you can change this to change which element you replace
    var reference = document.querySelector('.um-field-stores>div:nth-child(2)');

    var items = reference.innerText.split(','); // Split input string by "," character

    // Safe to reset this now that you have the string array of "items"
    reference.innerHTML = '';

    // Iterate each text item from items string array, and reuse your logic
    var index = 0;

    for(var text of items) {

    var refnum = text.trim();

    // Are you missing a "/" here?
    var replacement = "http://example.com/user/shop/" + refnum;

    // create new anchor tag
    var a = document.createElement('a');
    a.href = replacement;
    a.innerText = text;

    // do the replacement

    reference.appendChild(a); // append the new anchor tag into the element

    // Add comma if needed
    if(index < items.length - 1) {
        var comma = document.createTextNode(',');
        reference.appendChild(comma);
    }

    index ++;
  }

})()

這是一個工作jsFiddle來證明這一點 - 希望有所幫助！

Answer 3

我剛剛修改了你的JSfiddle以獲得結果：

(function() { 
    // collect variables
    // you can change this to change which element you replace
    var reference = document.querySelector('.um-field-stores>div:nth-child(2)');
    var text = reference.innerText;
    console.log(text);
    tags = text.split(",");
    console.log(tags);
    tags.forEach(function createLink(tagText) {
      var a = document.createElement('a');
    a.href = "http://example.com/user/shop\/" + tagText.trim();
    a.text  = tagText;
    console.log(a);
   // reference.innerHTML = '';
      reference.appendChild(a);
      reference.appendChild(document.createElement("br"));

});
   /* var numcode = /\d+/g;
    var refnum = text.match(numcode);
    var replacement = text.replace(numcode, "http://example.com/user/shop" + refnum);

    // create new anchor tag
    var a = document.createElement('a');
    a.href = replacement;
    a.innerText = text;
    reference.innerHTML = '';
    reference.appendChild(a);
*/
    // do the replacement

 //   reference.innerHTML = ''; // clear the old contents of the reference
 //   reference.appendChild(a); // append the new anchor tag into the element
})()

如果您看到代碼，您將看到一個循環處理拆分字符串的每個元素，從中創建一個鏈接然后將其追加。