在javascript中获取没有子元素的元素的文本答案

【问题标题】：get text of an element without children in javascript在javascript中获取没有子元素的元素的文本
【发布时间】：2012-04-14 21:42:58
【问题描述】：

如何获取没有子元素的元素的文本？ element.textContent 和 element.innerText 似乎都不起作用。

HTML：

<body>
<h1>Test Heading</h1>
<div>
Awesome video and music. Thumbs way up. Love it. Happy weekend to you and your family. Love, Sasha
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
    fool("body");
</script>

这是fool 函数：

jQuery.fn.justtext = function(text) {
    return $(this).clone()
    .children()
    .remove()
    .end()
    .text();
};

function fool(el) { 

    reverse(el);

    function reverse(el) {
        $(el).children().each(function() {
            if($(this).children().length > 0) {
                reverse(this);
                if($(this).justtext() != "")
                    reverseText(this);
            } else {
               reverseText(this)
            }
        });
    }

    function reverseText(el){
        var text = el.textContent;
        var frag = text.toString().split(/ /);
        var foo = "";
        var punctation_marks = [".",",","?","!"," ",":",";"];
        for(i in frag){
            if(punctation_marks.indexOf(frag[i]) == -1)
                foo += actualReverse(frag[i],punctation_marks) + " ";
        }
        el.textContent = foo;
    }

    function actualReverse(text,punctation_marks) {
        return (punctation_marks.indexOf(text.split("")[text.split("").length-1]) != -1)?text.split("").slice(0,text.split("").length-1).reverse().join("") + text.split("")[text.split("").length-1] : text.split("").reverse().join("");
    }
}

编辑：使用node.nodeType 并没有真正的帮助，原因如下：对以下 HTML 进行成像

<td class="gensmall">
    Last visit was: Sat Mar 31, 2012 10:50 am
    <br>
    <a href="./search.php?search_id=unanswered">View unanswered posts</a> | <a href="./search.php?search_id=active_topics">View active topics</a>
</td>

如果我使用nodeType，则只有a 元素的文本会改变，td 本身不会改变（“上次访问...”）

【问题讨论】：

任何代码？您的选择器可能是错误的，.textContent 和 innerText 为空时，element 不包含任何内容。
“没有孩子”到底是什么意思？
@Pointy 我只想要（与最后一个示例相关 - td 单元格）“最后一次访问是：2012 年 3 月 31 日星期六上午 10:50”，没有来自锚的文本跨度>
那么您想要一个节点及其所有后代节点的文本内容吗？看到“没有孩子”的部分让我觉得你想跳过后代。
不，我不想要文本 + 后代，而只想要文本

标签： javascript jquery text children

【解决方案1】：

元素的文本也是一个单独的节点。考虑这段代码：

<span>
    Some text
    <span>Inner text</span>
    More text
    <span>More inner text</span>
    Even more text
</span>

现在你说你想要元素的文本是什么意思？只是直系子女？

那么这段代码可能会有所帮助：

for (var element in elements) {
    if (element.nodeType == Node.TEXT_NODE) {
        // do something
    }
}

【讨论】：

【解决方案2】：

只要找到文本节点：

var element = document.getElementById('whatever'), text = '';
for (var i = 0; i < element.childNodes.length; ++i)
  if (element.childNodes[i].nodeType === Node.TEXT_NODE)
    text += element.childNodes[i].textContent;

edit — 如果您想要在后代（“子”）节点中的文本，并且（现在很明显）您正在使用 jQuery：

$.fn.allText = function() {
  var text = '';
  this.each(function() {
    $(this).contents().each(function() {
      if (this.nodeType == Node.TEXT_NODE)
        text += this.textContent;
      else if (this.nodeType == Node.ELEMENT_NODE)
        text += $(this).allText();
    });
  });
  return text;
};

等一下，我会测试一下 :-)（似乎有效）

【讨论】：

我建议使用 Node.TEXT_NODE 而不是“3”，因为它更具可读性。
可能还必须通过非文本节点递归才能找到它们包含的文本节点。（例如：表格单元格）
@David-SkyMesh：这正是我的问题。我编辑了我的问题
@Pointy 的答案或多或少是正确的。编写一个名为 getText() 的函数来执行他编写的操作（FOR 和 IF），但在 IF 中添加一个 ELSE 案例，该案例在 elements.childNodes[i] 上递归调用 getText
如果非文本节点的元素为文本提供结构（例如：表格行），您可能还希望解释这些（例如：在结果文本中插入“\n”）。

【解决方案3】：

除了像 Pointy 这样的答案之外，还可以像这样处理 <br/> 的换行符：

txt = '';
for (var i = 0; i < element.childNodes.length; ++i)
    if (element.childNodes[i].nodeType == 3) {
        txt += element.childNodes[i].textContent;
    } else if (element.childNodes[i].nodeType == 1) {
        name = element.childNodes[i].nodeName || element.childNodes[i].tagName || '';
        if (name.toUpperCase() == 'BR') {
            txt += '\n';
        }
    }
return txt;

【讨论】：

【解决方案4】：

此代码实现了与其他两个答案相同的结果，但以更具表现力、功能性的方式。所有现代浏览器（IE9 及更高版本）都支持 filter 和 map 数组方法。

把这个扔在那里，因为其他答案现在有点过时了。

var content = Array.prototype.filter.call(element.childNodes, function (element) {
    return element.nodeType === Node.TEXT_NODE;
}).map(function (element) {
    return element.textContent;
}).join("");

【讨论】：

使用箭头函数：Array.prototype.filter.call(ELEMENT.childNodes, e => e.nodeType === Node.TEXT_NODE).map(e => e.textContent).join('');