如何通過JavaScript的正則表達式獲取元素內部文本中的數字

Question

我想通過javascript正則表達式在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：如何從字符串中剝離HTML標簽？

由於您需要進行替換，因此我仍然會嘗試遍歷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來獲取元素的文本內容（不包括其后代元素）-實際上，我建議您不要這樣做，因為RegExp匹配HTML非常困難-存在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的正則表達式獲取元素內部文本中的數字

問題描述

2 個解決方案

解決方案1
4 2013-02-19 20:22:37

解決方案2
0 2013-02-19 20:31:35

如何通過JavaScript的正則表達式獲取元素內部文本中的數字

問題描述

2 個解決方案

解決方案1 4 2013-02-19 20:22:37

解決方案2 0 2013-02-19 20:31:35

解決方案1
4 2013-02-19 20:22:37

解決方案2
0 2013-02-19 20:31:35