使用 jQuery 或 Javascript 在页面上选择数字 [英] Select numbers on a page with jQuery or Javascript

问题描述

我只是想知道是否有办法使用 jQuery 或普通 Javascript 在页面上定位数字.

这是我想要做的:

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

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

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

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

解决方案

您可以遍历所有元素，查看文本节点，并将其替换为包含编号的更新内容.

var regex =/(\d+)/,替换 = '<span>$1</span>';函数替换文本(el){如果(el.nodeType === 3){如果(regex.test(el.data)){var temp_div = document.createElement('div');temp_div.innerHTML = el.data.replace(正则表达式，替换)；var 节点 = temp_div.childNodes;而(节点[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++) {替换文本(el.childNodes[i])；}}}替换文本(文档.正文)；

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

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

<小时>

你可以用一点 jQuery 把它缩短一点:

var regex =/(\d+)/g,替换 = '<span>$1</span>';函数替换文本(i，el){如果(el.nodeType === 3){如果(regex.test(el.data)){$(el).replaceWith(el.data.replace(regex, replacement));}} 别的 {$(el).contents().each(replaceText);}}$('body').each(replaceText);

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

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

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

I'm just wondering if there's a way to locate numbers on a page with jQuery or plain 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.

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

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.

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

解决方案

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/

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

---

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

Note that the regex requires the g global modifier.

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

这篇关于使用 jQuery 或 Javascript 在页面上选择数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！