获取表中的后裔的第一个数字值
问题描述:
我想要一种方法来获取第一个数值存在于一个表(和各自的tbody)内,但它需要能够找到第一个数字的值,并忽略所有标签,直到达到数字值。获取表中的后裔的第一个数字值
<table id="TableID">
<thead></thead>
<tbody>
<tr></tr>
<tr>
<td></td>
<td>
<div>
<div>
<span>
4031007
</span>
</div>
<div>
<span>
whatever
</span>
</div>
</div>
</td>
<td></td>
</tr>
</tbody>
</table>
在上面的例子中
,我们会去找4031007,这是一个<span>
内,但它可能已经是一个<div>
或别的东西。我需要这个,而不使用JQuery。任何帮助?
答
你可以做普通的老办法:让一个递归函数将返回具有文本内容的第一个节点的文本:
function findFirstNumber(node) {
// If this is a text node, return its contents. Trim it because there is
// whitespace between the elements that should be ignored
if (node.nodeType == Node.TEXT_NODE)
return node.textContent.trim();
// Iterate over all child nodes and finde the first one that has text in it
for (var child = node.firstChild; child; child = child.nextSibling) {
var content = firstText(child);
if (content && isNumber(content))
return content;
}
// No text found
return '';
}
function isNumber(value) {
return !!isNaN(value);
}
console.log(findFirstNumber(document.getElementById('TableID')));
我用mdn page about Node找出如何做到这一点。
see fiddle(打开控制台)
+1
要检查它是否是数字而不是字符串,请使用!isNaN(content)。如果这返回false然后继续迭代。 – RichieAHB 2014-09-10 17:52:37
答
如何接受正则表达式一个奇特的查找功能。
function findRegExp(start, reg, mod) {
if (! (reg && start)) return this;
return [].slice.call(start.querySelectorAll('*')).filter(function(elem) {
if (typeof reg == 'string')
reg = new RegExp(reg, mod ? mod : '');
var clone = elem.cloneNode(true),
child = clone.children;
for (var i=child.length; i--;)
clone.removeChild(child[i]);
var txt = clone.textContent.trim();
return reg.test(txt);
});
}
像
var elems = findRegExp(document.getElementById('TableID'), /^\d+$/);
和jQuery的版本中使用
$.fn.findRegExp = function(reg, mod) {
if (!reg) return this;
return this.find('*').addBack().filter(function() {
if (typeof reg == 'string')
reg = new RegExp(reg, mod ? mod : '');
var c = $(this).clone();
c.children().remove();
var txt = $.trim(c.text());
return reg.test(txt);
});
}
然后你就可以搜索包含的元素只有数字
$('#TableID').findRegExp(/^\d+$/);
用空格拆分table的'textContet',迭代结果数组,直到找到数字。 – Teemu 2014-09-10 17:39:09