Question

我对javascript很陌生，所以请在这里对我的知识不足感到抱歉。我在我们的网站上设置了一组餐馆作为用户个人资料，他们拥有的多项选择选项之一是从列表中选择同一特许经营者拥有的一个或多个商店编号。一旦选择了商店编号并在其个人资料上可见，我希望他们转变成指向其他个人资料的可点击链接。

换句话说，我希望“ 4247、31605、46531、59519”变成“ 4247，31605，46531，59519”。

我一直在用jQuery尝试用链接替换商店号，但是当它想用一个链接而不是单个链接替换所有的（包括逗号）时，卡住了。有什么建议么？ Here is what I have so far.我正在使用页面上显示的内容的直接示例。

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

})()

Here's a working jsFiddle to demonstrate this-希望能有所帮助！

Answer 3

我刚刚修改了JSfiddle以获得结果：

codenameone_settings.properties

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

如何用指向数字的链接替换数字

3 个答案: