span - obtener el texto de un label jquery

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

Question

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() Text $(''#list-item'').text() , obtengo "Esto es algo de textoPrimer intervalo textSecond span text ".

¿Hay alguna forma de obtener (y posiblemente eliminar, mediante 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 sencillo simplemente envolver el texto en etiquetas al escribir el html, pero nuevamente, el html está escrito previamente.

Answer 1

Al igual que la pregunta, estaba tratando de extraer texto para realizar alguna sustitución de expresiones regulares del texto, pero tenía problemas con mis elementos internos (es decir, <i> , <div> , <span> , etc.) también estaban recibiendo remoto.

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 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 se hace arriba es recorrer todos los elementos del el dado (que simplemente se obtuvo con $("div.my-class[name=''some-name'']"); Para cada elemento interno, básicamente los ignora . Para cada parte del texto (según lo determine if (this.nodeType === 3) ) se aplicará la sustitución de if (this.nodeType === 3) regulares solo a esos elementos.

La porción this.textContent = text simplemente reemplaza el texto sustituido, que en mi caso, estaba buscando tokens como [[min.val]] , [[max.val]] , etc.

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

Answer 2

Esta es una buena manera para mi

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

Answer 3

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

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

Y solo haz esto:

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

Answer 4

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

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

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

Answer 5

Esto parece un caso de uso excesivo de jQuery para mí. Lo siguiente agarrará 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;

Answer 6

Más fácil y más rápido:

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

Answer 7

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

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

Answer 8

No soy un experto en jQuery, pero ¿qué tal?

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

Answer 9

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.

Answer 10

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

Answer 11

Prueba esto:

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

Answer 12

Puedes probar esto

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

Answer 13

Respuesta simple:

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

Answer 14

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. Usted está recibiendo sólo el texto
2. El texto que desea extraer está delante 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);
}

Answer 15

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

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

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

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

Aquí está cómo usar este plugin:

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

Answer 16

Supongo que esto también sería una buena solució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/

También hay una forma un poco más fea de hacerlo, pero esto muestra más a fondo cómo funcionan las cosas, y permite un separador personalizado entre nodos de texto (quizás desee un salto de línea allí)

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

Answer 17

Tendrá que ser algo adaptado a las necesidades, que depende de la estructura que se presenta. Para el ejemplo que has 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 al que publicaste.

Answer 18

Use una condición adicional para verificar si innerHTML y innerText son iguales. Solo en esos casos, sustituye 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/

Answer 19

no es el código

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

¿Se está convirtiendo en jQuery por jQuery? Cuando las operaciones simples involucran tantos comandos encadenados y tanto procesamiento (innecesario), tal vez es 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

Answer 20

simplemente póngalo en un <p> o <font> mark y tome ese $ (''# listItem font''). text ()

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>

Answer 21

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

Variante corta de la respuesta de Estuardo.

o con get()

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

Answer 22

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

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

    return str;
};