如何用数字链接替换数字

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
})()

如果您看到代码，您将看到一个循环处理拆分字符串的每个元素，从中创建一个链接然后将其追加。