这个高亮，实质上是把12变成<span style="backgroud: yellow">12</span>。
那么只要做一个替换就可以了。但是需要考虑两点：
需要被替换的内容，必须是标签里的内容，不能是属性。比如，不能把<div width="100%" color="#12fe45">这里的100，12，45都不应该被替换。
需要被替换的内容，不能是<script>标签里的内容（理所当然的吧）。比如<script>var a=123xxx</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。。。
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<style type="text/css">
table{
width: 50%
height: 50%
border: 1px solid #d5d5d5
overflow: hidden
color:#4682b4
font: normal 24px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans
}
tr,td{
height:30px
line-height:30px
padding: 5px
}
.highlight {
padding:1px 4px
margin:0 -4px
background-color: #ccffff
text-shadow: 1px 1px white, -1px -1px #333
-moz-border-radius: 5px /* FF1+ */
-webkit-border-radius: 5px /* Saf3-4 */
border-radius: 5px /* Opera 10.5, IE 9, Saf5, Chrome */
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) /* FF3.5+ */
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) /* Saf3.0+, Chrome */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) /* Opera 10.5+, IE 9.0 */
}
</style>
</head>
<body>
<table id="myTab">
<tr>
<td>春眠不觉晓</td>
<td>处处蚊子咬</td>
<td>夜来大狗熊</td>
<td>看你往哪跑</td>
</tr>
<tr>
<td>床前明月光</td>
<td>地上鞋两双</td>
<td>一双归小姨</td>
<td>不说就给糖</td>
</tr>
</table>
<script type="text/javascript">
$(function(){
$("#myTab tr:odd").addClass("highlight")
})
</script>
</body>
</html>
偶数行高亮显示，可用自己调整颜色
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）