How to replace numbers with links to numbers

Question

I am pretty new to javascript, so please excuse my lack of knowledge here. I have a group of restaurants set up as user profiles on our website, and one of the multi-select options they have is to select one or more store numbers owned by the same franchisee from a list. Once the store numbers are selected and viewable on their profile, I want them to turn into clickable links to other profiles.

In other words, I want "4247, 31605, 46531, 59519" to turn into " 4247 , 31605 , 46531 , 59519 ".

I've been toying around with jQuery trying to replace the store numbers with links, but get stuck when it wants to replace all of them (including the commas) with one link instead of individual links. Any suggestions? Here is what I have so far. I'm using a direct example of what shows up on the page.

<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

It would be a lot easier to do this with a single regular expression: match digits, and replace each digit string with that digit string wrapped in an <a> . Use $& in the replacement string to represent the matched digits (the entire initial match):

 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

If I understand correctly, then I think the solution is to introduce a loop into your logic to perform the link insertion on a per-number basis. This would involve splitting your input string (text) based on the "," character, and the subsequently iterating the array of strings the result:

(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 ++;
  }

})()

Here's a working jsFiddle to demonstrate this - hope that helps!

Answer 3

I just now modified your JSfiddle to get the results:

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

If you see the code, you will see that a loop processes each element of the split string, creates a link out of it and then appends it back.