javascript - 使用javascript为网站正文标签中的所有数字添加一个跨度

Question

我想使用 JavaScript 将具有特定类的 span 标记添加到我网站中的所有数字。但是我得到了以下信息:

  <script>
  var regex = /(\d+)/,
   replacement = '<span class="font-arial">$1</span>';
   function replaceText(el) {
   if (el.nodeType === 3) {
   if (regex.test(el.data)) {
   var temp_div = document.createElement('div');

   temp_div.innerHTML = el.data.replace(regex, replacement);
   var nodes = temp_div.childNodes;
   while (nodes[0]) {
       el.parentNode.insertBefore(nodes[0],el);
   }
   el.parentNode.removeChild(el);
  }
  } else if (el.nodeType === 1) {
  for (var i = 0; i < el.childNodes.length; i++) {
   replaceText(el.childNodes[i]);
   }
  }
 }
 replaceText(document.body);
</script>

但问题如下例所示:

如果号码是:45 7320272536

它是这样写的:

 <span class="arial">
 <span class="arial">45</span>
 </span>
  <span class="arial">
  <span class="arial">7320272536</span>
  </span>

我想要这样:

  <span class="arial">45</span>
  <span class="arial">7320272536</span>

Answer 1

它可以更简单。您不需要再遍历子节点一次。相反，如果您使用 global match，您可以一次替换所有出现的数字。为正则表达式对象标记 g:

/(\d+)/g

因此在使用 replaceChild 清理代码后方法，您的代码将变为:

var regex = /(\d+)/g,
    replacement = '<span class="font-arial">$1</span>';

function replaceText(el) {
    if (el.nodeType === 3) {
        if (regex.test(el.data)) {
            var temp_div = document.createElement('div');
            temp_div.innerHTML = el.data.replace(regex, replacement);
            el.parentNode.replaceChild(temp_div, el);
        }
    } else if (el.nodeType === 1) {
        for (var i = 0; i < el.childNodes.length; i++) {
            replaceText(el.childNodes[i]);
        }
    }
}

replaceText(document.body);

演示: http://jsfiddle.net/a09vac2t/