Utilizzo di .text () per recuperare solo testo non nidificato nei tag figlio

Se ho HTML come questo:

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

Sto cercando di usare .text()per recuperare solo la stringa "Questo è un po 'di testo", ma se dovessi dire $('#list-item').text(), ottengo "Questo è un po' di testoPrima span textSeconda span text".

C'è un modo per ottenere (e possibilmente rimuovere, tramite qualcosa di simile .text("")) solo il testo libero all'interno di un tag e non il testo all'interno dei tag secondari?

L'HTML non è stato scritto da me, quindi questo è ciò con cui devo lavorare. So che sarebbe semplice avvolgere il testo nei tag quando si scrive l'html, ma di nuovo, l'html è pre-scritto.

Mi è piaciuta questa implementazione riutilizzabile basata sul clone()metodo trovato qui per ottenere solo il testo all'interno dell'elemento genitore.

Codice fornito per un facile riferimento:

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

Risposta semplice:

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

Mi sembra un caso di uso eccessivo di jquery. Quanto segue prenderà il testo ignorando gli altri nodi:

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

Dovrai tagliarlo, ma ti darà quello che vuoi in una linea semplice.

MODIFICARE

Quanto sopra otterrà il nodo di testo . Per ottenere il testo effettivo, utilizzare questo:

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

Più facile e veloce:

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

Simile alla risposta accettata, ma senza clonazione:

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

Ed ecco un plugin jQuery per questo scopo:

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

Ecco come utilizzare questo plugin:

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

non è il codice:

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

stai diventando jQuery per il bene di jQuery? Quando le operazioni semplici comportano tanti comandi concatenati e un'elaborazione così (non necessaria), forse è tempo di scrivere un'estensione 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));

chiamare:

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

gli argomenti sono nel caso in cui si verifichi uno scenario diverso, come ad esempio

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

il testo avrà valore:

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

Prova questo:

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

Dovrà essere qualcosa su misura per le esigenze, che dipendono dalla struttura che ti viene presentata. Nell'esempio che hai fornito, funziona:

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

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

Ma dipende abbastanza dal fatto che il markup sia simile a quello che hai pubblicato.

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

Breve variante della risposta Stuart.

o con get()

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

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

Questa è una vecchia domanda ma la risposta migliore è molto inefficiente. Ecco una soluzione migliore:

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

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

    return str;
};

E fai solo questo:

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

Presumo che questa sarebbe un'ottima soluzione anche - se si desidera ottenere il contenuto di tutti i nodi di testo che sono figli diretti dell'elemento selezionato.

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

Nota: la documentazione di jQuery utilizza un codice simile per spiegare la funzione dei contenuti: https://api.jquery.com/contents/

PS C'è anche un modo un po 'più brutto per farlo, ma questo mostra più in profondità come funzionano le cose e consente un separatore personalizzato tra i nodi di testo (forse vuoi un'interruzione di riga lì)

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

Propongo di utilizzare createTreeWalker per trovare tutti gli elementi di testo non associati agli elementi html (questa funzione può essere utilizzata per estendere 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>

Se la posizione indexdel nodo di testo è fissa tra i suoi fratelli, è possibile utilizzare

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

Non sei sicuro di quanto sia flessibile o di quanti casi hai bisogno per coprire, ma per il tuo esempio, se il testo viene sempre prima dei primi tag HTML, perché non dividere semplicemente l'html interno nel primo tag e prendere il primo:

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

e se ne hai bisogno più largo, forse solo

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

e se hai bisogno del testo tra due marcatori, come dopo una cosa ma prima di un'altra, puoi fare qualcosa di simile (non testato) e usare le istruzioni if ​​per renderlo abbastanza flessibile da avere un marcatore di inizio o fine o entrambi, evitando errori di riferimento null :

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

Generalmente creo funzioni di utilità per cose utili come questa, le faccio libere da errori e quindi faccio affidamento su di esse una volta solide, piuttosto che riscrivere sempre questo tipo di manipolazione di stringhe e rischiare riferimenti null ecc. In questo modo, puoi riutilizzare la funzione in molti progetti e non deve mai perdere altro tempo a eseguire il debug perché un riferimento a stringa ha un errore di riferimento indefinito. Potrebbe non essere il codice a 1 riga più corto di sempre, ma dopo avere la funzione di utilità, è una riga da allora in poi. Nota che la maggior parte del codice sta semplicemente gestendo i parametri presenti o meno per evitare errori :)

Per esempio:

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

Questo è un buon modo per me

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

Ho trovato una soluzione specifica che dovrebbe essere molto più efficiente della clonazione e della modifica del clone. Questa soluzione funziona solo con le seguenti due riserve, ma dovrebbe essere più efficiente della soluzione attualmente accettata:

1. Stai ricevendo solo il testo
2. Il testo che desideri estrarre è prima degli elementi figlio

Detto questo, ecco il codice:

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

Proprio come la domanda, stavo cercando di testo estratto al fine di fare un po 'regex sostituzione del testo, ma è stato sempre problemi in cui i miei elementi interni (es: <i>, <div>, <span>, etc.) sono stati ottenendo anche rimossi.

Il seguente codice sembra funzionare bene e ha risolto tutti i miei problemi.

Utilizza alcune delle risposte fornite qui, ma in particolare sostituirà il testo solo quando l'elemento è di 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;
  }
});

Ciò che fa sopra è passare in rassegna tutti gli elementi del dato el(che è stato semplicemente ottenuto con $("div.my-class[name='some-name']");. Per ogni elemento interno, sostanzialmente li ignora. Per ogni porzione di testo (come determinato da if (this.nodeType === 3)) applicherà la sostituzione regex solo a quegli elementi .

La this.textContent = textporzione sostituisce semplicemente il testo sostituito, che nel mio caso, ero alla ricerca di gettoni come [[min.val]], [[max.val]]ecc

Questo estratto di codice breve aiuterà chiunque cerchi di fare ciò che la domanda stava ponendo ... e un po 'di più.

inseriscilo semplicemente in <p>o <font>e prendi $ ('# listItem font'). text ()

La prima cosa che mi è venuta in mente

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

Puoi provare questo

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

Utilizzare una condizione aggiuntiva per verificare se innerHTML e innerText sono uguali. Solo in questi casi, sostituisci il testo.

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

Per poter tagliare il risultato, usa DotNetWala in questo modo:

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

Ho scoperto che l'uso della versione più breve come document.getElementById("listItem").childNodes[0]non funzionerà con trim () di jQuery.

Non sono un esperto di jquery, ma che ne dici di

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

Questo non testato, ma penso che potresti essere in grado di provare qualcosa del genere:

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

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