在javascript中獲取無子元素的文本

如何獲取沒有子元素的元素的文本？ element.textContent也沒有element.innerText似乎工作。在javascript中獲取無子元素的文本

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並不能真正幫助這裏的原因： Imaginge以下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本身（「上次訪問......」）

來源

2012-03-31 just Nik

PLZ發表您的HTML – Jigs 2012-03-31 12:47:02

任何代碼？您的選擇器可能是錯誤的，'.textContent'和'innerText'爲空時'element'不包含任何內容。 – 2012-03-31 12:47:29

你的意思是什麼，「沒有孩子」？ – Pointy 2012-03-31 13:07:53

只要找到文本節點：

var element = document.getElementById('whatever'), text = ''; 
for (var i = 0; i < element.childNodes.length; ++i) 
    if (element.childNodes[i].nodeType === 3) 
    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; 
};

等一下，我會測試一下:-)（似乎有效）

來源

2012-03-31 12:51:34 Pointy

我建議使用'Node.TEXT_NODE'而不是「3」，因爲它更具可讀性。 – 2012-03-31 12:55:25

可能還必須通過非文本節點遞歸來查找它們包含的文本節點。（例如：表格單元格） – 2012-03-31 13:01:03

@ David-SkyMesh：這正是我的問題。我編輯了我的問題 – 2012-03-31 13:03:12

元素的文本也是一個單獨的節點。考慮這段代碼：

<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 
    } 
}

來源

2012-03-31 12:54:26

此代碼實現了相同的結果其他兩個答案，但在一個更具表現力，功能性的方式。所有現代瀏覽器（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("");

來源

2015-05-24 19:21:15 fredrikekelund

除了像尖尖的答案，處理換行符的<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;

來源

2015-08-18 15:53:46 user2426679

在javascript中獲取無子元素的文本

回答

相關問題