2012-03-31 7 views
9

Làm cách nào để nhận được văn bản của phần tử không có con? Không phải element.textContent cũng không phải element.innerText dường như đang hoạt động.nhận văn bản của phần tử không có con trong 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> 

và đây là fool chức năng:

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(""); 
    } 
} 

chỉnh sửa: sử dụng node.nodeType không thực sự giúp đỡ và đây là lý do: Imaginge HTML sau

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

nếu tôi muốn sử dụng nodeType, chỉ có văn bản của phần tử a sẽ thay đổi, nhưng không phải là td bản thân ("lần truy cập trước ....")

+0

plz gửi html của bạn – Jigs

+0

Bất kỳ mã? Bộ chọn của bạn có thể sai, 'phần tử' không chứa bất kỳ nội dung nào khi' .textContent' và 'innerText' trống. –

+0

Chính xác thì ý của bạn là gì, "không có con"? – Pointy

Trả lời

14

Chỉ cần tìm các nút văn bản:

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; 

chỉnh sửa — nếu bạn muốn văn bản trong hậu duệ ("trẻ em") nút, và (như bây giờ đã rõ ràng) bạn đang sử dụng 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; 
}; 

Tiếp tục và tôi sẽ kiểm tra điều đó :-) (dường như hoạt động)

+5

Tôi suggesst sử dụng 'Node.TEXT_NODE' thay vì" 3 "vì nó dễ đọc hơn. –

+1

cũng có thể phải recurse thông qua các nút không phải văn bản để tìm các nút văn bản mà chúng chứa. (ví dụ: các ô bảng) –

+0

@ David-SkyMesh: Đó chính xác là vấn đề của tôi. Tôi đã chỉnh sửa câu hỏi của mình –

2

Văn bản của phần tử cũng là một nút riêng biệt. Hãy xem xét đoạn mã này:

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

làm bạn có nghĩa là bây giờ khi bạn nói rằng bạn muốn các văn bản của nguyên tố gì? Chỉ là những đứa trẻ trực tiếp?

Sau đó, mã đoạn mã này có thể giúp:

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

Mã này đạt được kết quả tương tự như hai câu trả lời khác, nhưng trong một, cách chức năng biểu cảm hơn. Các phương thức mảng filtermap được hỗ trợ trong tất cả các trình duyệt hiện đại (IE9 trở lên).

Ném nội dung này vào đó vì các câu trả lời khác hiện có một chút.

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

Ngoài câu trả lời như chóp, xử lý ký tự xuống dòng cho <br/> thể được thực hiện như thế này:

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;