12

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

这是我想要做的：

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

与 jQuery 一起使用:contains()会选择整个事物，而不仅仅是数字。

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

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

4

4 回答 4

12

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

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

于 2011-06-25T22:27:31.150 回答
1

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

document.body.innerHTML = document.body.innerHTML.replace(/(\d+)/g, "<span class='number'>$1</span>")
于 2011-06-25T22:22:53.793 回答
0

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

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

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

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

于 2011-06-25T22:17:12.163 回答
0

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

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

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

有关完整解决方案，请参阅上述答案。

于 2021-12-24T11:42:51.257 回答