使用getElementsByTag更改表中的值

Question

在过去的几天里我一直试图这样做，但我的Javascript是HORRID。非常。

基本上，我想要完成的是获取td中的值，并检查10位数的字符串。 （实际上，任何美国格式的电话号码。我已经提出了正则表达式。）我需要用其他东西替换该字符串（不是电话号码）。

表结构如下所示：

    <tr id="76">
        <td class="stxt">
            <div class="dtxt" id="t1344992123" title="14 Aug 12, 08:55 PM">17 mins ago</div>
            <span>
                <a title="Delete">[×]</a>&nbsp;
                <a title="Ban User">[o]</a>&nbsp;
            </span>
            <b class="nme pn_std">Person</b>
            : This is a line a user has said previously
        </td>
    </tr>

将有几行都具有相同的格式。它所说的“：这是用户之前说过的一条线”，需要检查数字。

我发布的表格式是我必须要处理的。无法添加，我无法删除任何标签/属性。

如果有人能够提出检查和替换我搜索的每个实例的代码，我可以自己插入正则表达式和替换字符串。

并且，如果任何人好奇，这是用于cbox聊天的文字过滤器。这只是在有人加载聊天时运行的东西。

任何可以帮助我的人都会很棒。就像我说的，我在Javascript上很弱。 PHP是我使用的语言。

Answer 1

如果无法唯一标识要替换其文本的元素，则需要遍历所有文本节点并将其替换为与正则表达式匹配的文本（您尚未向我们展示）。

function processTable(id) {
  var table = document.getElementById(id);
  var cells;
  var re = /\d{10}/; // just an example
  var text = 'foo';  // just an example

  if (table) {

    // Could iterate over table.rows then row.cells,
    // but gEBTN seems suitable
    cells = table.getElementsByTagName('td');

    for (var i=0, iLen=cells.length; i < iLen; i++) {
      replaceText(cells[i], re, text);
    }
  }
}

// Recursively replace text in text nodes of elements
function replaceText(el, re, text) {

  var node, nodes = el.childNodes;

  for (var i=0, iLen=nodes.length; i < iLen; i++) {
    node = nodes[i];

    // Replace content of text nodes
    // Ignore script elements
    if (node.nodeType == 3 && node.tagName.toLowerCase() != 'script') {
      node.data = node.data.replace(re, text);

    // Recurse over elements to get child text nodes
    } else if (node.childNodes) {
      replaceText(node, re, text);
    }
  }
}

一些HTML来测试它：

<table id="t0">
  <tr>
    <td>1234567890
    <td><span>1234567890</span>
  <tr>
    <td>foo 1234567890 bar
    <td><span><b>1234567890</b></span>
  <tr>
    <td><a href="http://www.google.com">1234567890</a>
    <td><span>1234567890</span>
<table>

<button onclick="processTable('t0')">Do replacements</button>

以上应该可以在任何支持javascript的浏览器中工作，比如自IE 5（我认为IE开始支持getElementById，当然IE 6确实如此）。

Answer 2

如果您不支持IE8以下的任何内容，则可以使用较新的querySelectorAll。但是在发表评论之后，我想我会评论这一点，而不是采用旧方法。

//var tableCells = document.querySelectorAll('#tableId td'),
var tableCells = document.getElementsById('tableId').getElementsByTagName('td'),
i = tableCells.length;

while(i--){
    var thisCell = tableCells[i];
    thisCell.innerHTML = thisCell.innerHTML.replace(yourRegEx,yourReplacementStuff);
}

在有人讨论regEx和HTML之前，请记住他只是在这里寻找电话号码，而不是用regEx来解析HTML。您可以在整个表的innerHTML属性上使用regEx，但我怀疑循环和咬掉较小的部分可能实际上更快。