Question

我想通过javascript regex获取html内部文本中的数字来替换它们例如在下面的代码中我想得到1,2,3,4,5,6,1,2,3,1,2,3，但不是div标签内的444。

<body>
  aaaa123aaa456
  <div style="background: #444">aaaa123aaaa</div>
  aaaa123aaa
</body>

什么是正则表达式？

Answer 1

您最好的选择是使用innerText或textContent来获取没有标记的文本，然后只使用正则表达式/\d/g来获取数字。

function digitsInText(rootDomNode) {
  var text = rootDomNode.textContent || rootDomNode.innerText;
  return text.match(/\d/g) || [];
}

例如，

alert(digitsInText(document.body));

如果您的HTML不在DOM中，您可以尝试自行剥离标记：JavaScript: How to strip HTML tags from string?

由于您需要进行替换，我仍然会尝试遍历DOM并单独操作文本节点，但如果这是不可能的，请尝试

var HTML_TOKEN = /(?:[^<\d]|<(?!\/?[a-z]|!--))+|<!--[\s\S]*?-->|<\/?[a-z](?:[^">']|"[^"]*"|'[^']*')*>|(\d+)/gi;

function incrementAllNumbersInHtmlTextNodes(html) {
  return html.replace(HTML_TOKEN, function (all, digits) {
    if ("string" === typeof digits) {
      return "" + (+digits + 1);
    }
    return all; 
  });
}

然后

incrementAllNumbersInHtmlTextNodes(
    '<b>123</b>Hello, World!<p>I <3 Ponies</p><div id=123>245</div>')

产生

    '<b>124</b>Hello, World!<p>I <4 Ponies</p><div id=123>246</div>'

它会在<script>这样的特殊元素结束时感到困惑，并且不会识别实体编码的数字，但应该以其他方式工作。

Answer 2

你不一定需要RegExp来获取一个元素的文本内容，不包括它的后代元素 - 实际上我建议反对它，因为HTML的RegExp匹配是非常困难的 - 有DOM解决方案：

function getImmediateText(element){
    var text = '';

    // Text and elements are all DOM nodes. We can grab the lot of immediate descendants and cycle through them.
    for(var i = 0, l = element.childNodes.length, node; i < l, node = element.childNodes[i]; ++i){
    // nodeType 3 is text
        if(node.nodeType === 3){
            text += node.nodeValue;
        }
    }

    return text;
}

var bodyText = getImmediateText(document.getElementsByTagName('body')[0]);

所以这里有一个函数只返回作为字符串的直接文本内容。当然，您可以使用RegExp使用以下内容删除数字：

var numberString = bodyText.match(/\d+/g).join('');

如何通过javascript正则表达式获取元素'innertext中的数字

2 个答案: