Question

jQuery JS 如何高亮页面上的所有数字

就是把所有数字（包括小数）都设置个背景颜色：

this is a 12 text 3.14to test55 end.

12，3.14，55都高亮！

哪位大神能给个代码啊？！

Answer 1

这个高亮，实质上是把12变成<span style="backgroud: yellow">12</span>。

那么只要做一个替换就可以了。但是需要考虑两点：

1. 需要被替换的内容，必须是标签里的内容，不能是属性。比如，不能把<div width="100%" color="#12fe45">这里的100，12，45都不应该被替换。

2. 需要被替换的内容，不能是<script>标签里的内容（理所当然的吧）。比如<script>var a=123; xxx</script> 这里的123不应该被替换。

所以，考虑到以上，最终的做法必须是遍历所有的标签，然后如果标签里没有标签的时候，才把标签里的文字作替换。

(function hilightNumber(jqObj) {
    // 不能替换script标签里的数字
    var domObj = jqObj[0];
    if (domObj.nodeName == "SCRIPT") {
        return;
    }
    // 如果标签里有标签，我们也不作替换，而是递归进去遍历内层的标签。
    var children = jqObj.children();
    if (children.length > 0) {
        for(var i=0; i<children.length; i++) {
            hilightNumber($(children[i]));
        }
    } else {
    // 标签里只有文字，没有内层标签的时候，才做替换，
    // 把123替换成带颜色的标签内包含123，就实现了高亮。
        var hilightedHtml = jqObj.html().replace(/([+\-]?[0-9]+(\.[0-9]+)?)/g, "<span style='background:yellow;'>$1</span>");
        jqObj.html(hilightedHtml);
    }
})($("body"));

注意！这个不能解决全部的问题，但大部分情况应该可以用了。

不能解决的例子：

<p>我是诡异的段落2333，但是我里面竟然还有子标签！<b>这里是加黑的字666</b>。<span>这里是其它颜色12345的哈哈</span></p>

如果是上面这样的HTML，2333可能不会被加亮。。。毕竟p里还有内层标签b和span。。。

追问

不愧是大神，好详细！
我做了个button添加click事件，要怎么写点击执行highlight，再点击取消highlight，
而且如何让2333也亮起来！
我是为了做检查数字后面有没有空格所以才把数字都highlight起来的方便看，
要怎么写（如果数字后面有空格那么这个空格背景颜色为红色）
不好意思，作为JS菜鸟问题比较多。。。

Answer 2

this is a <span name='number'>12</span> text <span name='number'>3.14</span>to test<span name='number'>55</span> end.

$("span[name='number']").css({backgroundColor:"red"});

追问

我需要的这个插件是为了检查页面的不是手写的哈！