如何仅读取字符串并忽略 JQuery 中的其他元素答案

【问题标题】：how to read string only and ignore other element in JQuery如何仅读取字符串并忽略 JQuery 中的其他元素
【发布时间】：2011-07-17 19:12:52
【问题描述】：

我有以下 'td' 元素，并且只想在没有 'span' 部分的情况下读出字符串部分（单元格 1），我该如何在 jQuery 中做到这一点？

<td class="myTable">cell 1<span class='end'>&emsp;</span></td>

谢谢。

【问题讨论】：

span标签内的信息可以变化吗？还是它总是按照 span 标签的内容遵循这种模式？

标签： jquery dom textnode nodevalue

【解决方案1】：

这是一个通用的解决方案，可以做到没有丑陋的正则表达式:-)

var text = $('.myTable').clone()
              .children()
                  .detach()
              .end()
              .text();

编辑 1：
或者，如果您确定 <span> 将始终只包含某种空格字符 - 您可以使用 .text() 后跟 .trim()，如下所示：

$.trim( $('.myTable').text() );

编辑 2：
只是为了多玩一些，这里是另一个不涉及 jQuery 的通用解决方案，因此效率更高。我介绍了很棒的.readStringOnly() 插件：

$.fn.readStringOnly = function () {
    var nodes = this[0].childNodes,
        text = '';
    for (var i=0, item; (item = nodes[i]); i++) {
      if ( item.nodeType == 3 ) { // text node! 
        text += item.nodeValue;
      }
    }
    return text;
  };

// Usage:
//   var text = $('.myTable').readStringOnly();

这本质上是第一个解决方案在纯 jQuery 方法中所做的，但是由于 jQuery 不支持文本节点处理，因此留下了两个相当糟糕的选择：低效的 jQuery 代码，或者这种庞大的 W3C-DOM 笨拙。（就像我用它制作了一个插件一样好。）

...

再一次，你总是可以使用某人已经建议的正则表达式。 :-)

【讨论】：

@Mar 然而相比之下非常低效。 =( 最起码，你应该把 detach() 换成 remove()。detach() 把信息保存在 dom 里……他的问题表明他想去掉所有的子内容。
.detach() 就足够了，因为.clone() 默认情况下不会克隆数据或事件。比较低效？当然可以，但对于所述问题来说，这是一个非常通用的解决方案。
@Mar 直到您到达 Jquery 1.4+ 文档摘录：通常，任何绑定到原始元素的事件处理程序都不会复制到克隆。可选的 withDataAndEvents 参数允许我们更改此行为，并改为制作所有事件处理程序的副本，绑定到元素的新副本。 ---- 从 jQuery 1.4 开始，所有元素数据（由 .data() 方法附加）也被复制到新副本中。---
为了真正高效，我们可以遍历 .contents() 并清除文本节点的nodeValues。 :-)
@Matthew 你一定是读得太快了。复制事件和数据是一个默认关闭选项。 ...见这里：api.jquery.com/clone>

【解决方案2】：

$(".myTable").html().replace(/<span.*<\/span>/gi, "")

此处示例：http://fiddle.jshell.net/TSYQJ/

【讨论】：

如果跨度标签是她想要删除的 td 中唯一始终存在的东西，我会赞成。否则，它是不完整的。

【解决方案3】：

var tableContents = $(".myTable").text();

刚刚测试过，这确实有效。示例页面：

<html>
<head>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    alert($(".myTable").text()); 
});
</script>
</head>
<body>

<table>
<tr>
<td class="myTable">cell 1<span class='end'>&emsp;</span></td>
</tr>
</table>
</body>
</html>

【讨论】：

这也将返回 span 标签内的所有内容，在本例中为字符。
.text() 不起作用，它返回：单元格 1（然后是一些时髦的代码，因为 Firefox 无法显示）。使用 .html() 我可以看到它打印出来：单元格 1 。在调用 .text() 之前，我更喜欢 .remove() 或 .empty() 以摆脱 span 元素，但似乎也不起作用....