Usando .text () para recuperar apenas texto não aninhado em tags filho

Se eu tiver html assim:

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

Estou tentando usar .text()para recuperar apenas a string "Este é um texto", mas, se eu disser $('#list-item').text(), recebo "Este é um texto textFirst span textSecond span text".

Existe uma maneira de obter (e possivelmente remover, por meio de algo como .text("")) apenas o texto livre em uma tag e não o texto em suas tags filho?

O HTML não foi escrito por mim, então é com isso que tenho que trabalhar. Eu sei que seria simples colocar apenas o texto em tags ao escrever o html, mas, novamente, o html é pré-escrito.

Gostei dessa implementação reutilizável com base no clone()método encontrado aqui para obter apenas o texto dentro do elemento pai.

Código fornecido para fácil referência:

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

Resposta simples:

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

Este parece ser um caso de uso excessivo de jquery para mim. A seguir, o texto será ignorado pelos outros nós:

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

Você precisará apará-lo, mas ele obterá o que você deseja em uma linha fácil.

EDITAR

O acima irá obter o nó de texto . Para obter o texto real, use o seguinte:

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

Mais fácil e rápido:

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

Semelhante à resposta aceita, mas sem clonagem:

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

E aqui está um plugin jQuery para este fim:

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

Aqui está como usar este plugin:

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

não é o código:

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

apenas se tornando jQuery pelo bem do jQuery? Quando operações simples envolvem tantos comandos encadeados e muito processamento (desnecessário), talvez seja hora de escrever uma extensão 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));

chamar:

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

os argumentos estão no caso de um cenário 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>");

o texto terá valor:

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

Tente o seguinte:

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

Terá de ser algo adaptado às necessidades, que depende da estrutura que lhe é apresentada. Para o exemplo que você forneceu, isso funciona:

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

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

Mas é bastante dependente da marcação ser semelhante à que você postou.

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

Variante curta de resposta Stuart.

ou com get()

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

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

Esta é uma pergunta antiga, mas a resposta principal é muito ineficiente. Aqui está uma solução melhor:

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

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

    return str;
};

E faça isso:

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

Presumo que essa seria uma boa solução também - se você deseja obter o conteúdo de todos os nós de texto que são filhos diretos do elemento selecionado.

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

Nota: a documentação do jQuery usa código semelhante para explicar a função do conteúdo: https://api.jquery.com/contents/

PS: Há também uma maneira um pouco mais feia de fazer isso, mas isso mostra mais detalhadamente como as coisas funcionam e permite um separador personalizado entre nós de texto (talvez você queira uma quebra de linha lá)

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

Proponho usar o createTreeWalker para encontrar todos os elementos de texto não anexados aos elementos html (essa função pode ser usada para estender o 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 a posição indexdo nó de texto estiver fixa entre seus irmãos, você poderá usar

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

Não tenho certeza de quão flexível ou quantos casos você precisa cobrir, mas, por exemplo, se o texto sempre vem antes das primeiras tags HTML - por que não dividir o html interno na primeira tag e pegar o primeiro:

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

e se você precisar mais amplo talvez apenas

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

e se você precisar do texto entre dois marcadores, como após uma coisa, mas antes de outra, poderá fazer algo como (não testado) e usar as instruções if para torná-la flexível o suficiente para ter um marcador de início ou fim ou ambos, evitando erros nulos de ref :

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

Geralmente, faço funções utilitárias para coisas úteis como essa, as deixo livres de erros e depois confio nelas frequentemente uma vez sólidas, em vez de sempre reescrever esse tipo de manipulação de string e arriscar referências nulas, etc. Dessa forma, você pode reutilizar a função em muitos projetos e nunca mais perca tempo depurando por que uma referência de string tem um erro de referência indefinido. Pode não ser o código de 1 linha mais curto de todos os tempos, mas depois que você tiver a função de utilitário, será uma linha a partir de então. Observe que a maior parte do código é apenas manipular parâmetros que estão lá ou não para evitar erros :)

Por exemplo:

/**
* 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 é uma boa maneira para mim

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

Eu vim com uma solução específica que deveria ser muito mais eficiente do que a clonagem e modificação do clone. Essa solução funciona apenas com as duas reservas a seguir, mas deve ser mais eficiente que a solução atualmente aceita:

1. Você está recebendo apenas o texto
2. O texto que você deseja extrair é anterior aos elementos filho

Com isso dito, aqui está o 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);
}

Assim como a pergunta, eu estava tentando texto extrato, a fim de fazer alguma substituição regex do texto, mas estava ficando problemas onde meus elementos internos (ou seja: <i>, <div>,<span> , etc.) estavam se também removidos.

O código a seguir parece funcionar bem e resolveu todos os meus problemas.

Ele usa algumas das respostas fornecidas aqui, mas em particular, substituirá o texto apenas quando o elemento for 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;
  }
});

O que o acima faz é percorrer todos os elementos do dado el(que foram simplesmente obtidos com $("div.my-class[name='some-name']");. Para cada elemento interno, basicamente os ignora. Para cada parte do texto (conforme determinado porif (this.nodeType === 3) ), aplicará a substituição do regex apenas nesses elementos .

A this.textContent = textporção simplesmente substitui o texto Substituição, que no meu caso, eu estava à procura de sinais como [[min.val]], [[max.val]], etc.

Este trecho curto de código ajudará qualquer um que tente fazer o que a pergunta estava perguntando ... e um pouco mais.

basta colocá-lo em um <p>ou<font> e pegar o $ ('# listItem font'). text ()

Primeira coisa que veio à 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>

Você pode tentar isso

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

Use uma condição extra para verificar se innerHTML e innerText são iguais. Somente nesses casos, substitua o 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 aparar o resultado, use o DotNetWala da seguinte maneira:

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

Eu descobri que usar a versão mais curta como document.getElementById("listItem").childNodes[0]não funcionará com o trim () do jQuery.

Eu não sou um especialista em jquery, mas que tal,

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

Isso não foi testado, mas acho que você pode tentar algo como isto:

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

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