使用javascript为网站的body标记中的所有数字添加一个span

adding a span to all the numbers in the body tag of the website using javascript

本文关键字：添加 数字 一个 span 网站 javascript body 使用      更新时间：2023-12-25

我想使用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>

它可以更简单。您不需要在子节点上循环一次。相反，如果您为regexp对象使用全局匹配标志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/

这是一个工作示例。

<!doctype html>
<html>
<head>
<title>replace test</title>
 <script>
    var regex = /('d+)/;
    replacement = '<span style="border:1px solid red">$1</span>';
    function replaceText(el) {
        //alert('Testing: ' + el.data);
        //alert('Node type: ' + el.nodeType);
        if (el.nodeType === 3) {
            if (regex.test(el.data)) {
                //alert('Matches');
                var temp_div = document.createElement('div');
                temp_div.innerHTML = el.data.replace(regex, replacement);
                //alert('Making it ' + temp_div.innerHTML);
                var nodes = temp_div.childNodes;
                while (nodes[0]) {
                    //alert(nodes.length + ": " + nodes[0].data);
                    el.parentNode.insertBefore(nodes[0],el);
                }
                el.parentNode.removeChild(el);
            }
        } else if (el.nodeType === 1) {
            //alert('Looping children: ' + el.childNodes.length);
            var rootChildrenCopy = toArray(el.childNodes).slice(0);
            for (var i = 0; i < rootChildrenCopy.length; i++) {
                replaceText(rootChildrenCopy[i]);
            }
        }
    }
    function toArray(obj) {
        var array = [];
        // iterate backwards ensuring that length is an UInt32
        for (var i = obj.length >>> 0; i--;) { 
            array[i] = obj[i];
        }
        return array;
    }
</script>
</head>
<body onload="replaceText(document.getElementById('abc'))">
<p>This is a number</p>
<div id='abc'>Here is a 45 num</div>

</body>
</html>

Element.childNodes在插入节点时会发生更改，因此在循环时需要保存其副本。Array.prototype.slice对此很好。

此外，您需要更改regex，以使用全局标志替换所有出现的事件，而不是仅第一次。

相关文章：