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

I'm just wondering if there's a way to locate numbers on a page with jQuery or plain Javascript.

我只是想知道是否有办法在jQuery或普通Javascript页面上找到数字。

Here's what I want to do:

这就是我想要做的：

Say "June 23" is on the page. What I want to do is be able to prepend and append some <span> selectors to the number.

说“6月23日”在页面上。我想要做的是能够在数字前加上一些选择器。

Using :contains() with jQuery selects the whole thing, not just the number.

使用：contains（）与jQuery选择整个事物，而不仅仅是数字。

These strings are being generated without any wrapping elements by a Wordpress theme I'm working on, and I only want to select the number.

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

Any help would be appreciated! Thanks for even thinking about it.
-George

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

3 个解决方案

#1

You can walk through all the elements, looking at text nodes, and replacing them with updated content that has the number wrapped.

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

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);

Example: http://jsfiddle.net/JVsM4/

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

This doesn't do any damage to existing elements, and their associated jQuery data.

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

EDIT: You could shorten it a bit with a little 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 );

Example: http://jsfiddle.net/JVsM4/1/

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

Note that the regex requires the g global modifier.

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

Probably a little slower this way, so if the DOM is quite large, I'd use the non-jQuery version.

这种方式可能有点慢，所以如果DOM非常大，我会使用非jQuery版本。

#2

Just thinking out loud, but do you reckon this would work?

只是大声思考，但你认为这会起作用吗？

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

#3

It is fully dependent on what format your date is.

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

I found this website with a lot of different regular expressions (because you are just searching a normal piece of text for a date).

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

This seems a good option if this is your format for your date (dd MMM yyyy): http://regexlib.com/REDetails.aspx?regexp_id=405

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

I assume, because it is a template, that your dates will be the same for all pages. So the format will be the same as well. You can use the regular expression on every piece of text on your template if you define it well.

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

#1