親要素内の子要素の前後にあるHTMLを個別に取得するにはどうすればよいですか？

Question

私たちはJavascript/jQueryに依存するWebアプリケーションを作成しています。それは、ユーザーがMad Libsのような種類のテキストの大きなブロックに個々の単語を記入することを伴います。大規模なテキストブロックを作成するために使用する一種のHTMLフォーマットを作成しました。このフォーマットは、ユーザがjQueryを埋め込んだときに操作します。テキストのブロックの

パートは次のようになります。マークアップは、私は別に、内側<span>の前と後のテキストを取得して操作する必要があることを考えると

<span class="fillmeout">This is a test of the <span>NOUN</span> Broadcast System.</span> 

。それらを「接頭辞」と「接尾辞」と呼んでいます。

私はを知っていますそのyou can't parse HTML with simple string manipulation、とにかく試しました。私は<span>と</span>タグでsplit()を使ってみました。それは十分に単純なようだった。残念ながら、Internet ExplorerはすべてのHTMLタグを大文字に変換するため、技術は失敗します。私は特別なケースを書くことができましたが、このエラーは正しい方法でこれを行うよう教えてくれました。

接頭辞と接尾辞を手動で指定するために余分なHTMLタグを使用することはできますが、それは醜く冗長なようです。私は、私たちのマークアップフォーマットをできるだけリーンで読み書き可能なものにしておきたいと思います。

私はjQueryのドキュメントを見てきましたが、私が必要とする機能を正確に実行することができません。 には、さまざまな機能があり、前と後、前後、および内側の要素をに追加しますが、見つからないものはありません。は、すでにあるものがです。私は内部<span>を取り除くことができましたが、削除された要素の前に何が来たのかをどのように伝えることができるのか分かりません。

私がやろうとしていることを行う「正しい」方法はありますか？

Answer 1

これらの回答のいくつかは私に必要なものをほとんど手に入れましたが、最終的にここには記載されていない機能が見つかりました：.contents()。テキストノードを含むすべての子ノードの配列を返します。必要な場合は、必要に応じて反復処理を行い、必要なものを探します。

Answer 2

簡単な文字列操作では、Regexを使用することもできます。 それはあなたの問題を解決するはずです。

var array = $('.fillmeout').html().split(/<\/?span>/i); 

Answer 3

jQuery APIを使用してください。 $('.fillmeout').children()を入力し、必要に応じてその要素を操作できます。

http://api.jquery.com/children/

Answer 4

これはどちらかの「正しい」方法である場合、私はわからないんだけど、あなたは常に上の文字列を分割でき要素とスパンを置き換えることができます：

jQuery('.fillmeout span').replaceWith('|'); 

http://api.jquery.com/replaceWith/

http://jsfiddle.net/mdarnell/P24se/

Answer 5

あなたは

を使用することができます210

$('.fillmeout span').get(0).previousSibling.textContent 
$('.fillmeout span').get(0).nextSibling.textContent 

これはIE9で動作しますが、悲しいことに、あなたの例に基づいて9

Answer 6

よりも小さいIEのバージョンでは、あなたは文を分割する区切り文字として、あなたのターゲットを使用することができません。

var str = $('.fillmeout').html(); 
str = str.split('<span>NOUN</span>'); 

これは["This is a test of the ", " Broadcast System."]の配列を返します。ここにはjsFiddle exampleがあります。

Answer 7

あなた自身でHTMLを解析する代わりにDOMを使用し、それ自身の要素に目的のテキストを入れることができない場合は、DOMを調べてテキストノードを探してから、スパンタグの後に

作業は主にこのようなプレーンなJavaScriptで行われているように、テキストを扱うことの代わりに、要素ノードのノードたときにjQueryの助けの全体の多くではありません。

$(".fillmeout").each(function() { 
    var node = this.firstChild, prefix = "", suffix = "", foundSpan = false; 
    while (node) { 
     if (node.nodeType == 3) { 
      // if text node 
      if (!foundSpan) { 
       prefix += node.nodeValue; 
      } else { 
       suffix += node.nodeValue; 
      } 
     } else if (node.nodeType == 1 && node.tagName == "SPAN") { 
      // if element and span tag 
      foundSpan = true; 
     } 
     node = node.nextSibling; 
    } 
    // here prefix and suffix are the text before and after the first 
    // <span> tag in the HTML 
    // You can do with them what you want here 
}); 

注：このコードは、その全て負いません。スパンの前のテキストは1つのテキストノードと1つのテキストノードにのみ配置されます。そうかもしれませんが、スパンタグの前後にあるすべてのテキストノードをまとめて照合するようにすることもできます。各側で1つのテキストノードを参照するだけであれば、コードは簡単になりますが、安全な前提であることは100％確実ではありません。

このコードは、スパンの前後にテキストがない場合も処理します。あなたは、それはここで働いて見ることができます

：http://jsfiddle.net/jfriend00/P9YQ6/

Answer 8

あなただけの（jQueryのセレクターと相まって）nextSiblingとpreviousSiblingネイティブのJavaScriptを使用することができます

$('.fillmeout span').each(
    function(){ 
     var prefix = this.previousSibling.nodeValue, 
      suffix = this.nextSibling.nodeValue; 
    }); 

JS Fiddle proof of concept。

参考文献：

• each()。
• node.nextSibling。
• node.previousSibling。

Answer 9

は完全を期すために、私はきれいな答えは、このようにそれ自身の<span>に接頭辞と接尾辞テキストを配置することであることを指摘しなければならないと思ったし、あなたが直接、目的のテキストにアクセスするためのjQueryのセレクタとメソッドを使用することができます。

<span class="fillmeout"> 
    <span class="prefix">This is a test of the </span> 
    <span>NOUN</span> 
    <span class="suffix"> Broadcast System.</span> 
</span> 

その後、コードはのように簡単になります：

FYI

var fillme = $(".fillmeout").eq(0); 
var prefix = fillme.find(".prefix").text(); 
var suffix = fillme.find(".suffix").text(); 

あなたが理論化として、私は「醜いと冗長」シンプルさのこのレベルを呼び出すことはありません。 HTMLマークアップを使用して、別々にアクセスしたい別々の要素にテキストを区切ります。それは賢明で冗長ではありません。

あなたは3つの異なる色（赤、白、青）のおもちゃを持っていると想像してください。最初は色で構成されていますが、将来、色で分けなければならないことがあります再び。また、それらを格納する3つのボックスがあります。それらをすべて1つのボックスに入れ、手動で色で後で並べ替えるか、すでに色分けしてそれぞれのボックスに入れて、分離しないようにすることができます後でやるために働く。どちらが簡単ですか？どちらが賢いですか？

HTML要素はボックスに似ています。それらはあなたのテキストのためのコンテナです。将来的にテキストを区切りたい場合は、それぞれのテキストを独自の名前付きコンテナに入れて、将来そのテキストだけに簡単にアクセスできるようにすることもできます。