2012-03-31 17 views
9

में बच्चों के बिना किसी तत्व का टेक्स्ट प्राप्त करें मैं बच्चों के बिना तत्व का पाठ कैसे प्राप्त करूं? न तो element.textContent और न ही element.innerText काम कर रहे प्रतीत होते हैं।जावास्क्रिप्ट

HTML:

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

संपादित:

<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 समारोह है 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 ही ("अंतिम यात्रा ....")

+0

plz अपने html – Jigs

+0

किसी भी कोड पोस्ट? आपका चयनकर्ता शायद गलत है, 'तत्व' किसी भी सामग्री को प्राप्त नहीं करता है जब '.textContent' और' innerText' खाली होते हैं। –

+0

"बच्चों के बिना" आपका क्या मतलब है? – Pointy

उत्तर

14

बस पाठ नोड्स लगता है:

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

पकड़ो और मैं इसका परीक्षण करूंगा :-) (काम करने लगता है)

+5

मैं "3" के बजाय 'Node.TEXT_NODE' का उपयोग करने का सुझाव देता हूं क्योंकि यह अधिक पठनीय है। –

+1

को टेक्स्ट नोड्स को ढूंढने के लिए गैर-पाठ नोड्स के माध्यम से भी पुन: साझा करना पड़ सकता है। (उदाहरण: तालिका कक्ष) –

+0

@ डेविड-स्काईमेश: यह बिल्कुल मेरी समस्या है। मैंने अपना प्रश्न –

2

तत्व का पाठ भी एक अलग नोड है।

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

इस कोड को दो अन्य उत्तर के रूप में एक ही परिणाम प्राप्त होता है, लेकिन एक और अधिक अर्थपूर्ण, कार्यात्मक तरीके से। filter और map सरणी विधियों को सभी आधुनिक ब्राउज़रों (IE9 और ऊपर) में समर्थित किया जाता है।

वहां से इसे फेंकने के बाद से अन्य उत्तरों अब थोड़ा दिनांकित हैं।

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

नुकीले आदि के उत्तर, <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;