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

Если у меня есть html:

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

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

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

    22 Solutions collect form web for “Использование .text () для извлечения только текста, не вложенного в дочерние tags”

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

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

     
  • some textmore textagain more
  • second textmore textagain more
  • var text = $("li").textNotChild(".....","");

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

     some textagain more.....second textagain more 

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

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

    Демо: http://jquery.nodnod.net/cases/2385/run

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

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

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

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

    или с get()

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

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

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

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

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

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

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

    просто поместите его в

    или и возьмите этот $ (‘# listItem font’). text ()

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

     
  • This is some text First span text Second span 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); } 

    Я предлагаю использовать 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; } 
     
  • This is some text First span text Second span text
  • Так же, как вопрос, я пытался извлечь текст, чтобы сделать некоторую замену текста регулярным выражением, но получал проблемы, когда мои внутренние элементы (то есть: ,

    , и т. Д.) Получали также удален.

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

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

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

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

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

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

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

    Чтобы иметь возможность обрезать результат, используйте 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] не будет работать с document.getElementById("listItem").childNodes[0] jQuery.

    Используйте дополнительное условие для проверки того, являются ли 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/

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

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

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

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

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

    Создание виртуального изображения физического раздела

    Как настроить метрики интерфейса для конкретного маршрута в Mac OS X

    В чем разница между жесткими ссылками NTFS и перегородками каталогов?

    Как удалить папку «System Volume Information» с внешних дисков?

    Как сохранить активное окно под другими с помощью XMouse в Windows 7?

    Как сделать видимым скрытый раздел

    Tomato Dual VLAN (где один из них туннелируется VPN)

    Какой бесплатный инструмент для редактирования видео можно использовать в Windows, чтобы разрезать файл mp4?

    Что вызывает клик смерти моего жесткого диска?

    Как контролировать программы и службы при запуске Windows?

    Постоянное обнаружение ERR_NAME_RESOLUTION_FAILED

    Как скопировать все песни с моего iPod (nano 4g) на компьютер бесплатно

    Отключить возможность вытащить вкладку Chrome

    Являются ли частые перезагрузки в течение короткого периода времени повреждением моего компьютера?

    Устранение неполадок Window7 .exe не открывается

    Давайте будем гением компьютера.