Использование .text () для извлечения только текста, не вложенного в дочерние теги

Если у меня есть HTML, как это:

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

Я пытаюсь использовать .text() чтобы получить только строку «Это какой-то текст», но если бы я сказал $('#list-item').text(), я получаю «Это какой-то текст textFirst span textSecond span».

Есть ли способ получить (и, возможно, удалить, через что-то вроде .text("") ) только свободный текст внутри тега, а не текст внутри его дочерних тегов?

HTML не был написан мной, поэтому я должен работать с этим. Я знаю, что было бы просто обернуть текст в теги при написании HTML, но опять же, HTML уже написан заранее.

Мне понравилась эта многоразовая реализация, основанная на clone()методе, найденном здесь, чтобы получить только текст внутри родительского элемента.

Код предоставлен для удобства пользования:

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

Простой ответ:

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

Это похоже на случай чрезмерного использования jquery для меня. Следующее будет захватывать текст, игнорируя другие узлы:

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

Вам нужно будет обрезать это, но это дает вам то, что вы хотите в одну, простую линию.

РЕДАКТИРОВАТЬ

Выше будет получен текстовый узел . Чтобы получить реальный текст, используйте это:

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

Проще и быстрее:

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

Похож на принятый ответ, но без клонирования:

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

И вот для этого есть плагин jQuery:

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

Вот как использовать этот плагин:

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

это не код:

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

просто становиться jQuery ради jQuery? Когда простые операции включают в себя столько цепочек команд и столько (ненужной) обработки, возможно, пришло время написать расширение 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));

звонить:

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

аргументы в случае, если встречается другой сценарий, такой как

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

текст будет иметь значение:

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

Попробуй это:

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

Это должно быть что-то с учетом потребностей, которые зависят от структуры, с которой вы представлены. Для приведенного вами примера это работает:

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

Демо-версия: http://jquery.nodnod.net/cases/2385/run

Но это в значительной степени зависит от того, насколько разметка похожа на то, что вы опубликовали.

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

Краткий вариант ответа Стюарта.

или с get()

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

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

Это старый вопрос, но главный ответ очень неэффективен. Вот лучшее решение:

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

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

    return str;
};

И просто сделай это:

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

Я предполагаю, что это также было бы хорошим решением - если вы хотите получить содержимое всех текстовых узлов, которые являются прямыми потомками выбранного элемента.

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

Примечание. В документации jQuery для объяснения функции содержимого используется похожий код: https://api.jquery.com/contents/.

PS Есть также немного более уродливый способ сделать это, но это показывает более подробно, как все работает, и позволяет использовать собственный разделитель между текстовыми узлами (возможно, вы хотите, чтобы разрыв строки был там)

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

Я предлагаю использовать createTreeWalker для поиска всех текстовых элементов, не привязанных к html-элементам (эту функцию можно использовать для расширения 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>

Если положение indexтекстового узла фиксировано среди его братьев и сестер, вы можете использовать

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

Не уверен, насколько гибким или сколько случаев вам нужно это покрыть, но для вашего примера, если текст всегда предшествует первым HTML-тегам - почему бы просто не разделить внутренний html на первый тег и взять первый:

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

и если вам нужно шире, может быть, просто

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

и если вам нужен текст между двумя маркерами, например, после одной вещи, но перед другой, вы можете сделать что-то вроде (непроверенное) и использовать операторы if, чтобы сделать его достаточно гибким, чтобы иметь маркер начала или конца или оба, избегая ошибок нулевых ссылок :

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

Я обычно делаю вспомогательные функции для таких полезных вещей, как это, освобождаю их от ошибок, а затем часто полагаюсь на них, а не переписываю этот тип манипуляции со строками, рискуя нулевыми ссылками и т. Д. Таким образом, вы можете повторно использовать функцию во многих проектах и ​​никогда не нужно тратить на это время снова, отладка, почему ссылка на строку имеет неопределенную ошибку ссылки. Возможно, это не самый короткий однострочный код, но после того, как у вас есть функция полезности, она станет одной строкой. Обратите внимание, что большая часть кода просто обрабатывает параметры, присутствующие там или нет, чтобы избежать ошибок :)

Например:

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

Это хороший способ для меня

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

Я придумал конкретное решение, которое должно быть гораздо более эффективным, чем клонирование и модификация клона. Это решение работает только со следующими двумя оговорками, но должно быть более эффективным, чем принятое в настоящее время решение:

1. Вы получаете только текст
2. Текст, который вы хотите извлечь, находится перед дочерними элементами

С учетом сказанного, вот код:

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

Так же , как вопрос, я пытался извлечь текст для того , чтобы сделать некоторые регулярное выражение замены текста , но получаю проблемы там , где мои внутренние элементы (т.е. <i>, <div>,<span> и т.д.) становились также удалены.

Следующий код, кажется, работает хорошо и решил все мои проблемы.

Он использует некоторые ответы, представленные здесь, но, в частности, будет заменять текст только тогда, когда элемент имеет 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;
  }
});

То, что сделано выше - это циклическое прохождение всех элементов данного el(которое было просто получено с помощью $("div.my-class[name='some-name']");. Для каждого внутреннего элемента оно в основном игнорирует их. Для каждой части текста (как определеноif (this.nodeType === 3) ) это будет применять подстановку регулярных выражений только к этим элементам ,

Эта this.textContent = textчасть просто заменяет замещенный текст, который в моем случае я искал, например [[min.val]], токены и [[max.val]]т. Д.

Эта выдержка из короткого кода поможет любому, кто пытается сделать то, о чем спрашивал вопрос ... и немного больше.

просто поместите это в <p>или<font> возьмите этот $ ('# listItem font'). text ()

Первое, что пришло в голову

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

Вы можете попробовать это

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

Используйте дополнительное условие, чтобы проверить, совпадают ли innerHTML и innerText. Только в тех случаях заменить текст.

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

Чтобы иметь возможность обрезать результат, используйте 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();

Я обнаружил, что использование более короткой версии like document.getElementById("listItem").childNodes[0]не будет работать с trim () в jQuery.

Я не эксперт JQuery, но как насчет,

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

Это не проверено, но я думаю, что вы можете попробовать что-то вроде этого:

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

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