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

标签 javascript jquery text children

如何获取没有子元素的元素的文本? element.textContentelement.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 本身不会改变(“上次访问....”)

最佳答案

只需找到文本节点:

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;

编辑 — 如果您想要后代(“子”)节点中的文本,并且(现在很明显)您正在使用 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;
};

稍等,我会测试一下:-)(似乎有效)

关于javascript - 在javascript中获取没有子元素的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9955955/

相关文章:

javascript - Foundation 6 DropdownMenu 事件未触发

javascript - 使用 jquery 监控表单字段的变化

javascript - 具有逐字同步功能的 AVSpeechSynthesizer

php - 仅在一个 WHILE 循环结果上显示 div

java - 使用Java匹配文本中的某些单词(模式)

text - Flutter-如何在黑暗模式下更改状态栏文本的颜色?

JavaScript - 读取 XML 文档

javascript - 修改元素属性后 Jquery 选择器不起作用

javascript - Jquery:在表单上提交验证然后允许默认操作继续

swift - 如何为字符串中的每个字母设置 UIColor