使用 jQuery 或 Javascript 在页面上选择数字

Posted 2023-03-11

【中文标题】使用 jQuery 或 Javascript 在页面上选择数字

【英文标题】：Select numbers on a page with jQuery or Javascript

【发布时间】：2011-09-22 18:34:38

【问题描述】：

我只是想知道是否有一种方法可以使用 jQuery 或纯 javascript 来定位页面上的数字。

这是我想做的：

假设页面上有“6 月 23 日”。我想要做的是能够在号码前面加上一些<span> 选择器。

在 jQuery 中使用 :contains() 会选择整个内容，而不仅仅是数字。

这些字符串是由我正在开发的 Wordpress 主题生成的，没有任何包装元素，我只想选择数字。

任何帮助将不胜感激！感谢您甚至考虑它。 -乔治

【问题讨论】：

您知道您的日期所在的确切元素吗？你能做一些正则表达式并找到一个日期吗？

+1 回答有趣的问题

【参考方案1】：

您还可以选择包含逗号作为千位分隔符的十进制数字：

let regex = /([,\d]*\.?\d+)/g;

这将匹配 1234 和 1,234 和 1234.5678 和 1,234.5678 和 0.5678 和 .5678。

完整解决方案请参考the above answer。

【参考方案2】：

您可以遍历所有元素，查看文本节点，然后将它们替换为包含数字的更新内容。

var regex = /(\d+)/,
    replacement = '<span>$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);

示例： http://jsfiddle.net/JVsM4/

这不会对现有元素及其关联的 jQuery 数据造成任何损害。

---

编辑：你可以用一点 jQuery 把它缩短一点：

var regex = /(\d+)/g,
    replacement = '<span>$1</span>';

function replaceText(i,el) 
    if (el.nodeType === 3) 
        if (regex.test(el.data)) 
            $(el).replaceWith(el.data.replace(regex, replacement));
        
     else 
        $(el).contents().each( replaceText );
    


$('body').each( replaceText );

示例： http://jsfiddle.net/JVsM4/1/

请注意，正则表达式需要 g 全局修饰符。

这样可能会慢一点，所以如果 DOM 很大，我会使用非 jQuery 版本。

【参考方案3】：

只是大声思考，但你认为这会奏效吗？

document.body.innerHTML = document.body.innerHTML.replace(/(\d+)/g, "<span class='number'>$1</span>")

【讨论】：

@andreas 这似乎会抓住数字，但我只想在前面加上span。 1美元会取代号码吗？ （我是 javascript 菜鸟）

@ggwicz 它将所有数字 N 替换为 N，因此所有数字都包含在 中。我只是在这个页面上做了它，它确实会破坏一些东西。 :)

@ggwicz 它将完全按照您的意愿进行操作 - 但不是追加和前置（只有对元素进行 DOM 操作才有可能）它会采用数字（作为字符串）然后前置 并附加 &lt/span>，然后将文档中的数字文本替换为上一个操作的结果

替换 document.body.innerHTML 是个坏主意。例如，它将销毁任何事件处理程序，例如.click()。

谢谢大家。这个解决方案有效，但是，就像你说的那样，它使一些.click() 和我正在进行的.mouseenter() 事件崩溃了。 Patrick DW 的解决方案效果最好。

【参考方案4】：

这完全取决于您的日期格式。

我发现这个网站有很多不同的正则表达式（因为你只是在一段普通的文本中搜索一个日期）。

如果这是您的日期格式（dd MMM yyyy），这似乎是一个不错的选择：http://regexlib.com/REDetails.aspx?regexp_id=405

我假设，因为它是一个模板，所以您的日期对于所有页面都是相同的。所以格式也是一样的。如果定义得当，您可以在模板上的每一段文本上使用正则表达式。

【讨论】：

感谢您的输入，但我要查找的不是格式化日期。只是数字，不一定是任何格式

谢谢大家 @Patrick DW 的解决方案效果很好。谢谢大佬！