Usando .text () para recuperar solo texto no anidado en etiquetas secundarias

Si tengo html como este:

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

Estoy tratando de usar .text()para recuperar solo la cadena "Esto es algo de texto", pero si tuviera que decir $('#list-item').text(), obtengo "Esto es algo de textoPrimero texto de extensiónSegundo texto de extensión".

¿Hay alguna manera de obtener (y posiblemente eliminar, a través de algo como .text("")) solo el texto libre dentro de una etiqueta, y no el texto dentro de sus etiquetas secundarias?

El HTML no fue escrito por mí, así que esto es con lo que tengo que trabajar. Sé que sería simple simplemente envolver el texto en etiquetas al escribir el html, pero nuevamente, el html está preescrito.

Me gustó esta implementación reutilizable basada en el clone()método que se encuentra aquí para obtener solo el texto dentro del elemento padre.

Código provisto para una fácil referencia:

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

Respuesta simple:

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

Esto parece un caso de uso excesivo de jquery para mí. Lo siguiente tomará el texto ignorando los otros nodos:

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

Tendrá que recortar eso, pero obtendrá lo que desea en una sola línea fácil.

EDITAR

Lo anterior obtendrá el nodo de texto . Para obtener el texto real, use esto:

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

Más fácil y rápido:

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

Similar a la respuesta aceptada, pero sin clonación:

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

Y aquí hay un complemento jQuery para este propósito:

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

Aquí se explica cómo usar este complemento:

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

no es el código:

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

solo convirtiéndome en jQuery por el bien de jQuery? Cuando las operaciones simples implican tantos comandos encadenados y tanto procesamiento (innecesario), tal vez sea hora de escribir una extensión 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));

llamar:

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

los argumentos son en caso de que se encuentre un escenario diferente, como

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

el texto tendrá valor:

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

Prueba esto:

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

Tendrá que ser algo adaptado a las necesidades, que dependen de la estructura que se le presente. Para el ejemplo que ha proporcionado, esto funciona:

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

Demostración: http://jquery.nodnod.net/cases/2385/run

Pero depende bastante de que el marcado sea similar a lo que publicaste.

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

Variante corta de la respuesta de 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();
};

Esta es una vieja pregunta, pero la respuesta principal es muy ineficiente. Aquí hay una mejor solución:

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

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

    return str;
};

Y solo haz esto:

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

Supongo que esta sería una buena solución también, si desea obtener el contenido de todos los nodos de texto que son hijos directos del elemento seleccionado.

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

Nota: la documentación de jQuery utiliza un código similar para explicar la función de contenido: https://api.jquery.com/contents/

PD: También hay una forma un poco más fea de hacerlo, pero esto muestra más en profundidad cómo funcionan las cosas y permite un separador personalizado entre los nodos de texto (tal vez desee un salto de línea allí)

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

Propongo usar createTreeWalker para encontrar todos los elementos de texto que no están adjuntos a elementos html (esta función se puede usar para extender 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>

Si la posición indexdel nodo de texto está fija entre sus hermanos, puede usar

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

No estoy seguro de cuán flexible o cuántos casos necesita para cubrir, pero para su ejemplo, si el texto siempre viene antes de las primeras etiquetas HTML, ¿por qué no simplemente dividir el html interno en la primera etiqueta y tomar la primera:

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

y si lo necesitas más ancho tal vez solo

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

y si necesita el texto entre dos marcadores, como después de una cosa pero antes de otra, puede hacer algo como (no probado) y usar declaraciones if para que sea lo suficientemente flexible como para tener un marcador de inicio o fin o ambos, evitando al mismo tiempo los errores de referencia nula :

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 hago funciones de utilidad para cosas útiles como esta, las hago libres de errores y luego confío en ellas con frecuencia una vez que son sólidas, en lugar de reescribir siempre este tipo de manipulación de cadenas y arriesgar referencias nulas, etc. De esa manera, puede reutilizar la función en muchos proyectos y nunca más tendrá que perder el tiempo depurando por qué una referencia de cadena tiene un error de referencia indefinido. Puede que no sea el código de 1 línea más corto de la historia, pero después de tener la función de utilidad, es una línea a partir de ese momento. Tenga en cuenta que la mayor parte del código solo maneja los parámetros que existen o no para evitar errores :)

Por ejemplo:

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

Esta es una buena manera para mi

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

Se me ocurrió una solución específica que debería ser mucho más eficiente que la clonación y modificación del clon. Esta solución solo funciona con las siguientes dos reservas, pero debería ser más eficiente que la solución actualmente aceptada:

1. Solo recibes el texto
2. El texto que desea extraer está antes de los elementos secundarios.

Dicho esto, aquí está el código:

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

Al igual que la pregunta, yo estaba tratando de extraer texto con el fin de hacer alguna sustitución de expresiones regulares del texto, pero estaba recibiendo problemas donde mis elementos internos (es decir: <i>, <div>,<span> , etc.) también se iban a quitar.

El siguiente código parece funcionar bien y resolvió todos mis problemas.

Utiliza algunas de las respuestas proporcionadas aquí, pero en particular, solo sustituirá el texto cuando el elemento sea de 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;
  }
});

Lo que hace lo anterior es recorrer todos los elementos de lo dado el(que simplemente se obtuvo con $("div.my-class[name='some-name']");. Para cada elemento interno, básicamente los ignora. Para cada porción de texto (según lo determinado porif (this.nodeType === 3) ) aplicará la sustitución de expresiones regulares solo a esos elementos .

La this.textContent = textporción simplemente reemplaza la indicación sustitutiva, que en mi caso, yo estaba buscando para los tokens como [[min.val]], [[max.val]], etc.

Este breve extracto de código ayudará a cualquiera que intente hacer lo que la pregunta estaba haciendo ... y un poco más.

solo ponlo en un <p>o<font> y agarrar ese texto $ ( '# listitem fuente'). ()

Lo primero que me vino a la 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>

Puedes probar esto

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

Use una condición adicional para verificar si innerHTML e innerText son iguales. Solo en esos casos, reemplace el texto.

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

Para poder recortar el resultado, use DotNetWala así:

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

Descubrí que usar la versión más corta como document.getElementById("listItem").childNodes[0]no funcionará con trim () de jQuery.

No soy un experto en jquery, pero ¿qué tal,

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

Esto no ha sido probado, pero creo que puede intentar algo como esto:

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

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