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

Question

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

这就是我想要做的事情:

说"6月23日"在页面上.我想要做的是能够在数字前添加和附加一些<span>选择器.

使用:contains()jQuery选择整个事物,而不仅仅是数字.

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

任何帮助,将不胜感激!谢谢你甚至考虑过它.
-乔治

Answer 1

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

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版本.