Użycie .text () do pobrania tylko tekstu nie zagnieżdżonego w znacznikach potomnych

Jeśli mam taki HTML:

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

Próbuję użyć, .text()aby pobrać tylko ciąg „To jest jakiś tekst”, ale gdybym powiedział $('#list-item').text(), otrzymuję „To jest jakiś tekst Pierwszy tekst o rozpiętości drugiego tekstu”.

Czy istnieje sposób, aby uzyskać (i ewentualnie usunąć, za pomocą czegoś podobnego .text("")) tylko dowolny tekst w znaczniku, a nie tekst w jego znacznikach potomnych?

HTML nie został napisany przeze mnie, więc z tym muszę pracować. Wiem, że pisanie html byłoby proste po prostu zawinąć tekst w tagi, ale znowu html jest wstępnie napisany.

Podobała mi się ta implementacja wielokrotnego użytku oparta na clone()metodzie znalezionej tutaj, aby uzyskać tylko tekst wewnątrz elementu nadrzędnego.

Kod podany dla łatwego odniesienia:

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

Prosta odpowiedź:

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

Wydaje mi się to nadużywaniem jquery. Poniższe pobierze tekst ignorując inne węzły:

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

Musisz to przyciąć, ale uzyskasz to, czego chcesz w jednej, łatwej linii.

EDYTOWAĆ

Powyższe otrzyma węzeł tekstowy . Aby uzyskać rzeczywisty tekst, użyj tego:

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

Łatwiej i szybciej:

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

Podobna do zaakceptowanej odpowiedzi, ale bez klonowania:

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

A oto wtyczka jQuery do tego celu:

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

Oto jak korzystać z tej wtyczki:

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

nie jest kodem:

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

właśnie stajesz się jQuery dla dobra jQuery? Gdy proste operacje wymagają użycia wielu powiązanych łańcuchów i tyle (niepotrzebnego) przetwarzania, być może nadszedł czas, aby napisać rozszerzenie 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));

zadzwonić:

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

argumenty występują w przypadku napotkania innego scenariusza, np

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

tekst będzie miał wartość:

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

Spróbuj tego:

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

Będzie to musiało być coś dostosowanego do potrzeb, które zależą od prezentowanej struktury. W podanym przykładzie działa to:

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

Demo: http://jquery.nodnod.net/cases/2385/run

Ale to dość zależy od tego, że znaczniki są podobne do tego, co opublikowałeś.

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

Krótki wariant odpowiedzi Stuarta.

lub z get()

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

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

To stare pytanie, ale najlepsza odpowiedź jest bardzo nieefektywna. Oto lepsze rozwiązanie:

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

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

    return str;
};

I po prostu zrób to:

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

Zakładam, że byłoby to również dobre rozwiązanie - jeśli chcesz uzyskać zawartość wszystkich węzłów tekstowych, które są bezpośrednimi dziećmi wybranego elementu.

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

Uwaga: Dokumentacja jQuery używa podobnego kodu do wyjaśnienia funkcji zawartości: https://api.jquery.com/contents/

PS Istnieje również nieco bardziej brzydki sposób, ale pokazuje to bardziej szczegółowo, jak to działa, i pozwala na niestandardowy separator między węzłami tekstowymi (być może potrzebujesz podziału linii)

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

Proponuję użyć createTreeWalker do znalezienia wszystkich elementów tekstowych nieprzyłączonych do elementów HTML (ta funkcja może być użyta do rozszerzenia 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>

Jeśli pozycja indexwęzła tekstowego jest ustalona między rodzeństwem, możesz użyć

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

Nie wiem, jak elastycznie lub ile spraw potrzebujesz, aby to uwzględnić, ale na przykład, jeśli tekst zawsze pojawia się przed pierwszymi znacznikami HTML - dlaczego nie po prostu podzielić wewnętrzny HTML na pierwszy znacznik i wziąć pierwszy:

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

a jeśli potrzebujesz go szerszego, może po prostu

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

a jeśli potrzebujesz tekstu między dwoma znacznikami, na przykład po jednej rzeczy, ale przed drugą, możesz zrobić coś takiego (nieprzetestowane) i użyć instrukcji if, aby uczynić go wystarczająco elastycznym, aby mieć znacznik początkowy lub końcowy lub oba, jednocześnie unikając błędów zerowania odwołania :

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

Generalnie tworzę funkcje użyteczne dla takich przydatnych rzeczy, robię je bezbłędne, a następnie polegam na nich często, gdy są solidne, zamiast zawsze przepisywać tego typu manipulacje ciągami i ryzykować zerowe odwołania itp. W ten sposób możesz ponownie użyć funkcji w wielu projektach i nigdy więcej nie trzeba tracić czasu na debugowanie, dlaczego odwołanie do ciągu zawiera nieokreślony błąd odwołania. Być może nie będzie to najkrótszy 1-liniowy kod w historii, ale po uruchomieniu funkcji narzędziowej jest to jedna linia od tego momentu. Zauważ, że większość kodu to po prostu obsługa parametrów, aby uniknąć błędów :)

Na przykład:

/**
* 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)

To dla mnie dobry sposób

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

Wymyśliłem konkretne rozwiązanie, które powinno być znacznie wydajniejsze niż klonowanie i modyfikowanie klonu. To rozwiązanie działa tylko z następującymi dwoma zastrzeżeniami, ale powinno być bardziej wydajne niż obecnie akceptowane rozwiązanie:

1. Dostajesz tylko tekst
2. Tekst, który chcesz wyodrębnić, znajduje się przed elementami potomnymi

Powiedziawszy to, oto kod:

// '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);
}

Podobnie jak na pytanie, starałem się tekst ekstraktu w tym celu pewne podstawienie regex tekstu, ale był już problemów, gdzie moje elementy wewnętrzne (np: <i>, <div>, <span>, itd.) Brali również usunięte.

Poniższy kod wydaje się działać dobrze i rozwiązał wszystkie moje problemy.

Wykorzystuje niektóre z podanych tutaj odpowiedzi, ale w szczególności zastąpi tekst tylko wtedy, gdy element jest 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;
  }
});

To, co powyższe robi, polega na przechodzeniu przez wszystkie elementy danego elementu el(który został po prostu uzyskany za pomocą $("div.my-class[name='some-name']");. Dla każdego elementu wewnętrznego, w zasadzie je ignoruje. Dla każdej części tekstu (określonej przez if (this.nodeType === 3)) zastosuje podstawienie wyrażenia regularnego tylko do tych elementów .

this.textContent = textCzęść po prostu zastępuje Zmieniony tekst, który w moim przypadku, ja szukałem takich jak tokeny [[min.val]], [[max.val]]itp

Ten krótki fragment kodu pomoże każdemu, kto spróbuje zrobić to, o co pytało pytanie ... i jeszcze więcej.

po prostu umieść to w <p>lub<font> i weź tę $ ('# listItem font'). text ()

Pierwsza rzecz, jaka przyszła mi do głowy

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

Możesz tego spróbować

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

Użyj dodatkowego warunku, aby sprawdzić, czy innerHTML i innerText są takie same. Tylko w tych przypadkach zastąp tekst.

$(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/

Aby móc przyciąć wynik, użyj 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();

Dowiedziałem się, że użycie krótszej wersji jak document.getElementById("listItem").childNodes[0]nie działa z trim () jQuery.

Nie jestem ekspertem od jquery, ale co powiesz na

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

To nie zostało przetestowane, ale myślę, że możesz spróbować czegoś takiego:

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

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