.text（）を使用して子タグにネストされていないテキストのみを取得する

私がこのようなhtmlを持っている場合：

<li id="listItem">
    This is some text
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>

.text()「This is some text」という文字列だけを取得しようとしていますが、$('#list-item').text()「This is some textFirst span textSecond span text」というメッセージが表示されます。

.text("")子タグ内のテキストではなく、タグ内のフリーテキストのみを取得する（そして、場合によっては削除するなど）方法はありますか？

HTMLは私が作成したものではないため、これを使用して作業する必要があります。HTMLを書き込むときに、テキストをタグで囲むだけで簡単であることはわかっていますが、HTMLは事前に作成されています。

親要素内のテキストのみを取得するために、ここにあるclone()メソッドに基づくこの再利用可能な実装が好きでした。

簡単に参照できるように提供されたコード：

$("#foo")
    .clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text();

簡単な答え：

$("#listItem").contents().filter(function(){ 
  return this.nodeType == 3; 
})[0].nodeValue = "The text you want to replace with" 

これはjqueryを使いすぎた場合のようです。以下は他のノードを無視してテキストを取得します：

document.getElementById("listItem").childNodes[0];

あなたはそれをトリミングする必要がありますが、それはあなたが望むものを一つの簡単なラインで取得します。

編集

上記はテキストノードを取得します。実際のテキストを取得するには、これを使用します。

document.getElementById("listItem").childNodes[0].nodeValue;

より簡単かつ迅速に：

$("#listItem").contents().get(0).nodeValue

受け入れられた回答に似ていますが、クローンはありません：

$("#foo").contents().not($("#foo").children()).text();

そして、これがこの目的のためのjQueryプラグインです：

$.fn.immediateText = function() {
    return this.contents().not(this.children()).text();
};

このプラグインの使用方法は次のとおりです。

$("#foo").immediateText(); // get the text without children

コードではありません：

var text  =  $('#listItem').clone().children().remove().end().text();

jQueryのためにjQueryになるだけですか？単純な操作に多数のチェーンされたコマンドとその多くの（不要な）処理が含まれる場合は、おそらくjQuery拡張機能を作成するときです。

(function ($) {
    function elementText(el, separator) {
        var textContents = [];
        for(var chld = el.firstChild; chld; chld = chld.nextSibling) {
            if (chld.nodeType == 3) { 
                textContents.push(chld.nodeValue);
            }
        }
        return textContents.join(separator);
    }
    $.fn.textNotChild = function(elementSeparator, nodeSeparator) {
    if (arguments.length<2){nodeSeparator="";}
    if (arguments.length<1){elementSeparator="";}
        return $.map(this, function(el){
            return elementText(el,nodeSeparator);
        }).join(elementSeparator);
    }
} (jQuery));

呼び出す：

var text = $('#listItem').textNotChild();

引数は、別のシナリオが発生した場合などにあります。

<li>some text<a>more text</a>again more</li>
<li>second text<a>more text</a>again more</li>

var text = $("li").textNotChild(".....","<break>");

テキストには値があります：

some text<break>again more.....second text<break>again more

これを試して：

$('#listItem').not($('#listItem').children()).text()

それはあなたが提示された構造に依存するニーズに合わせたものである必要があります。あなたが提供した例では、これはうまくいきます：

$(document).ready(function(){
     var $tmp = $('#listItem').children().remove();
     $('#listItem').text('').append($tmp);
});

デモ：http : //jquery.nodnod.net/cases/2385/run

しかし、それはあなたが投稿したものに似ているマークアップにかなり依存しています。

$($('#listItem').contents()[0]).text()

スチュアートの回答の短い変形。

またはと get()

$($('#listItem').contents().get(0)).text()

jQuery.fn.ownText = function () {
    return $(this).contents().filter(function () {
        return this.nodeType === Node.TEXT_NODE;
    }).text();
};

これは古い質問ですが、トップの回答は非常に非効率的です。これはより良い解決策です：

$.fn.myText = function() {
    var str = '';

    this.contents().each(function() {
        if (this.nodeType == 3) {
            str += this.textContent || this.innerText || '';
        }
    });

    return str;
};

そして、これをしてください：

$("#foo").myText();

選択した要素の直接の子であるすべてのテキストノードのコンテンツを取得する場合も、これはすばらしい解決策になると思います。

$(selector).contents().filter(function(){ return this.nodeType == 3; }).text();

注：jQueryドキュメントでは、コンテンツ機能を説明するために同様のコードを使用しています：https : //api.jquery.com/contents/

PSそれを行うには少し醜い方法もありますが、これは物事がどのように機能するかをより深く示し、テキストノード間のカスタムセパレーターを可能にします（多分そこで改行が必要かもしれません）

$(selector).contents().filter(function(){ return this.nodeType == 3; }).map(function() { return this.nodeValue; }).toArray().join("");

createTreeWalkerを使用して、html要素にアタッチされていないすべてのテキスト要素を検索することをお勧めします（この関数を使用してjQueryを拡張できます）。

function textNodesOnlyUnder(el) {
  var resultSet = [];
  var n = null;
  var treeWalker  = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, function (node) {
    if (node.parentNode.id == el.id && node.textContent.trim().length != 0) {
      return NodeFilter.FILTER_ACCEPT;
    }
    return NodeFilter.FILTER_SKIP;
  }, false);
  while (n = treeWalker.nextNode()) {
    resultSet.push(n);
  }
  return resultSet;
}



window.onload = function() {
  var ele = document.getElementById('listItem');
  var textNodesOnly = textNodesOnlyUnder(ele);
  var resultingText = textNodesOnly.map(function(val, index, arr) {
    return 'Text element N. ' + index + ' --> ' + val.textContent.trim();
  }).join('\n');
  document.getElementById('txtArea').value = resultingText;
}

<li id="listItem">
    This is some text
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>
<textarea id="txtArea" style="width: 400px;height: 200px;"></textarea>

indexテキストノードの位置が兄弟間で固定されている場合は、

$('parentselector').contents().eq(index).text()

カバーする必要のある柔軟性やケースの数はわかりませんが、例として、テキストが常に最初のHTMLタグの前にある場合は、最初のタグで内部のhtmlを分割して、前者を取得するのはどうでしょうか。

$('#listItem').html().split('<span')[0]; 

必要に応じてもっと広くする必要があるかもしれません

$('#listItem').html().split('<')[0]; 

そして、2つのマーカーの間のテキストが必要な場合（ある事後の後など）、null refエラーを回避しながら、（テストされていない）のようなことを行い、ifステートメントを使用して、開始マーカーまたは終了マーカーまたはその両方を持つのに十分な柔軟性を持たせることができます：

var startMarker = '';// put any starting marker here
var endMarker = '<';// put the end marker here
var myText = String( $('#listItem').html() );
// if the start marker is found, take the string after it
myText = myText.split(startMarker)[1];        
// if the end marker is found, take the string before it
myText = myText.split(endMarker)[0];
console.log(myText); // output text between the first occurrence of the markers, assuming both markers exist.  If they don't this will throw an error, so some if statements to check params is probably in order...

私は通常、このような便利なことのためにユーティリティ関数を作成し、エラーをなくしてから、このタイプの文字列操作を常に書き換えたり、null参照を危険にさらしたりするのではなく、一度確実にそれらに依存します。このようにして、関数を再利用できます。多くのプロジェクトで、文字列参照に未定義の参照エラーがある理由をデバッグするために時間を無駄にする必要はありません。これまでで最短の1行のコードではないかもしれませんが、ユーティリティ関数を使用した後は、それ以降は1行になります。ほとんどのコードは、エラーを回避するために存在するパラメータを処理するだけであることに注意してください。

例えば：

/**
* Get the text between two string markers.
**/
function textBetween(__string,__startMark,__endMark){
    var hasText = typeof __string !== 'undefined' && __string.length > 0;
    if(!hasText) return __string;
    var myText = String( __string );
    var hasStartMarker = typeof __startMark !== 'undefined' && __startMark.length > 0 && __string.indexOf(__startMark)>=0;
    var hasEndMarker =  typeof __endMark !== 'undefined' && __endMark.length > 0 && __string.indexOf(__endMark) > 0;
    if( hasStartMarker )  myText = myText.split(__startMark)[1];
    if( hasEndMarker )    myText = myText.split(__endMark)[0];
    return myText;
}

// now with 1 line from now on, and no jquery needed really, but to use your example:
var textWithNoHTML = textBetween( $('#listItem').html(), '', '<'); // should return text before first child HTML tag if the text is on page (use document ready etc)

これは私にとって良い方法です

   var text  =  $('#listItem').clone().children().remove().end().text();

私は、クローンのクローン作成と変更よりもはるかに効率的な特定のソリューションを思いつきました。このソリューションは、次の2つの予約でのみ機能しますが、現在受け入れられているソリューションよりも効率的です。

1. あなただけのテキストを取得しています
2. 抽出するテキストが子要素の前にあります

そうは言っても、ここにコードがあります：

// 'element' is a jQuery element
function getText(element) {
  var text = element.text();
  var childLength = element.children().text().length;
  return text.slice(0, text.length - childLength);
}

ただ、質問のように、私は、テキストの一部の正規表現置換を行うために抽出したテキストにしようとしていたが、問題を得ていたところ、私の内側の要素（すなわち：<i>、<div>、<span>、など）も削除されたばかりの。

次のコードはうまく機能し、私の問題をすべて解決したようです。

ここではいくつかの回答を使用していますが、特に、要素がの場合にのみテキストを置き換えますnodeType === 3。

$(el).contents().each(function() { 
  console.log(" > Content: %s [%s]", this, (this.nodeType === 3));

  if (this.nodeType === 3) {
    var text = this.textContent;
    console.log(" > Old   : '%s'", text);

    regex = new RegExp("\\[\\[" + rule + "\\.val\\]\\]", "g");
    text = text.replace(regex, value);

    regex = new RegExp("\\[\\[" + rule + "\\.act\\]\\]", "g");
    text = text.replace(regex, actual);

    console.log(" > New   : '%s'", text);
    this.textContent = text;
  }
});

上記のことは、与えられたすべての要素をループ処理することですel（これは単にで取得されました$("div.my-class[name='some-name']");。各内部要素について、基本的にそれらを無視します。テキストの各部分（if (this.nodeType === 3)）については、これらの要素にのみ正規表現置換を適用します。

this.textContent = text部分は、単に私の場合、私のようなトークンを探していたの置換テキストを置き換え[[min.val]]、[[max.val]]など、

この短いコードの抜粋は、質問が尋ねていることを実行しようとしている人を助けます...そしてもう少し。

それを<p>またはに入れて、<font>その$（ '＃listItem font'）。text（）を取得します

最初に頭に浮かんだこと

<li id="listItem">
    <font>This is some text</font>
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>

あなたはこれを試すことができます

alert(document.getElementById('listItem').firstChild.data)

追加の条件を使用して、innerHTMLとinnerTextが同じかどうかを確認します。それらの場合にのみ、テキストを置き換えます。

$(function() {
$('body *').each(function () {
    console.log($(this).html());
    console.log($(this).text());
    if($(this).text() === "Search" && $(this).html()===$(this).text())  {
        $(this).html("Find");
    }
})
})

http://jsfiddle.net/7RSGh/

結果をトリミングできるようにするには、DotNetWalaを次のように使用します。

$("#foo")
    .clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text()
    .trim();

などの短いバージョンを使用するdocument.getElementById("listItem").childNodes[0]と、jQueryのtrim（）では機能しないことがわかりました。

私はjqueryのエキスパートではありませんが、どうですか、

$('#listItem').children().first().text()

これはテストされていませんが、次のようなことを試すことができると思います：

 $('#listItem').not('span').text();

http://api.jquery.com/not/