純粋なjavascriptを使用してこのテキストを選択する方法、jqueryはありませんか？

Question

javascript（jqueryはありません）を使用してテキストを選択する必要があります。最初の子要素の前にmyClass要素のテキスト（ 'Hello World'）を選択する必要があります。ここに2つの例がありますが、最初の要素として<img>タグがあり、時には<br>タグになります。 <br>タグの間のテキストも選択する必要があります。

<p class="myClass" style="padding: 5px;"> 
    Hello World 

    <img src="http://xyz.com/image.gif">            
    <br> 
    30-12-2011 19:45 
    <br> 
    Testing 
    <br> 
</p> 





<p class="myClass" style="padding: 5px;"> 
    Hello World                   
    <br> 
    30-12-2011 19:45 
    <br> 
    Testing 
    <br> 
</p> 

編集注：私もMyClassの中の他のテキストノードを選択する必要があります。子要素の1つとして<img>が存在することもありますが、時には存在しないこともあります。

だから私はこれを行うことができる

var a = 'Hello World' 
var b = '30-12-2011 19:45' 
var c = 'Testing' 

誰もで終わるしたいと思いますか？

Answer 1

var elem = document.getElementsByClassname("myClass")[0], 
    txtNode = elem.childNodes[0], 
    txtNodeValue = txtNode.nodeValue; 
console.log(txtNodeValue); 

Example。

要素をそのクラスで選択します（[0]は、一致するセットの最初の要素を選択するように指示します）。最初の子ノードを探します。あなたの場合、これはテキストノードになるので、nodeValueを取得するだけです。

Answer 2

あなたが望むものは本当にわかりません。あなたはすべてのテキストを取得したい場合は、使用します。

var text = element.innerText || element.textContent; 

あなたは、いくつかの部分のテキストを取得したい場合、あなたはすべての子ノードを反復処理し、テキストノードを抽出する必要があります。

var texts = [], 
    children = element.childNodes; 


for(var i = 0, len = children.length; i < len; i++) { 
    var node = children[i]; 
    if(node.nodeType === 3) { 
     var text = node.nodeValue.replace(/^\s+|\s+$/g, ''); 
     if(text.length > 0) { 
      texts.push(text); 
     } 
    } 
} 

これは連続するテキストノードを連結しません。これは、新しいテキストノードを挿入した場合や、JavaScriptを使用してテキストノードを分割した場合に発生する可能性があります。このケースでは、この操作を行うことができます：すべての

var texts = [''], 
    children = element.childNodes, 
    new_bucket = false, 
    bucket = 0; 

for(var i = 0, len = children.length; i < len; i++) { 
    var node = children[i]; 
    if(node.nodeType === 1 && new_bucket) { 
     new_bucket = false; 
     texts[++bucket] = ''; 
    } 
    else if(node.nodeType === 3) { 
     var text = node.nodeValue.replace(/^\s+|\s+$/g, ''); 
     if(text.length > 0) { 
      new_bucket = true; 
      texts[bucket] += text 
     } 
    } 
} 

Answer 3

最初は、あなたがクラス名を使用して要素を選択する

​​

を使用することができます。 目的の要素を選択し（配列を返します）、 nodeValue を使用してテキストを返します。

Answer 4

これは、クラスmyClassとその要素の最初text nodeで最初要素を取得します：ここでは

document.getElementsByClassName("myClass")[0].childNodes[0].nodeValue 

は説明する素晴らしい articleです。

trimの空白を削除することもできます。次の機能を追加して機能をトリムすることができます。

if(typeof String.prototype.trim !== 'function') { 
    String.prototype.trim = function() { 
    return this.replace(/^\s+|\s+$/g, ''); 
    } 
} 

...

var trimmedString = document.getElementsByClassName("myClass")[0].childNodes[0].nodeValue.trim(); 

Answer 5

あなたの例はどれくらい規則的であるか分かりませんが、ドキュメントオブジェクトを使用してDOMとやりとりすることができます。

最初のインデックス、そののchildNodesとテキストノード

var nodes = elements[0].childNodes; 

for (var i = 0; i < nodes.length; i++) 
{ 
    var node = nodes[i], 
     text; 
    // loop over the nodes and see if its as textnode. Then trim and skip empty strings 
    if(node.nodeType === 3) { 
     text = node.textContent.trim(); 
     if(text) { 
      alert(text); 
     } 
    } 
} 

Answer 6

http://jsfiddle.net/kgdnR/1/

var abc = [].filter.call((document.getElementsByClassName("myClass")[0].childNodes), function(node) { 

    if (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim().length) { 
     return true; 
    } 
    return false; 
}).map(function(node) { 
    return node.nodeValue.trim(); 
}); 

var a = abc[0], 
    b = abc[1], 
    c = abc[2]; 

console.log(a, b, c); 

であることの最初のインデックスを取るMyClassの要素

var elements = document.getElementsByClassName('myClass'); 

を選択することができますIEで動作させることができますが、もし望むのであれば、jQueryを使うこともできます。 XPath式を使用して

Answer 7

：

var contextNode = document.body; 
var node, textNodes = []; 
var search = document.evaluate('.//text()', contextNode, null, XPathResult.ANY_TYPE); 
while(node = search.iterateNext()) textNodes.push(node);