Використання .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(), я отримую "Це текст" Перший текст тексту "Другий проміжок тексту".

Чи є спосіб отримати (а можливо, вилучити через щось подібне .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];

Вам потрібно буде обрізати це, але ви отримаєте те, що хочете, за один простий рядок.

EDIT

Наведене вище отримає текстовий вузол . Щоб отримати власне текст, скористайтеся цим:

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]; 

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

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

Я, як правило, роблю корисні функції для таких корисних речей, роблю їх без помилок, а потім часто покладаюсь на них, колись суцільно, а не завжди переписуючи цей тип маніпуляцій рядків та ризикуючи нульовими посиланнями тощо. Таким чином, ви можете повторно використовувати функцію у багатьох проектах і ніколи не доведеться витрачати час на це знову налагодження, чому посилання рядка має невизначену помилку посилання. Можливо, це не найкоротший 1-й рядковий код будь-коли, але після того, як у вас з'явиться функція утиліти, це буде один рядок відтепер. Зверніть увагу, що більша частина коду - це лише обробка параметрів, які існують або не для уникнення помилок :)

Наприклад:

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

Я дізнався, що використання коротшої версії, як, наприклад document.getElementById("listItem").childNodes[0], не буде працювати з обробкою jQuery ().

Я не експерт із питань jquery, але як насчет

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

Це неперевірено, але я думаю, ви можете спробувати щось подібне:

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

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