Если у меня есть 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()
методе, найденном здесь, чтобы получить только текст внутри родительского элемента.Код предоставлен для удобства пользования:
источник
Простой ответ:
источник
this.nodeType == Node.TEXT_NODE
вместоthis.nodeType == 3
. Легче читать и понимать ИМО..contents().filter(...)
var text = $(this).contents().filter(...); if (text.length) { return text[0].nodeValue; } return "";
Это похоже на случай чрезмерного использования jquery для меня. Следующее будет захватывать текст, игнорируя другие узлы:
Вам нужно будет обрезать это, но это дает вам то, что вы хотите в одну, простую линию.
РЕДАКТИРОВАТЬ
Выше будет получен текстовый узел . Чтобы получить реальный текст, используйте это:
источник
$('.foo')[0].childNodes[0].nodeValue.trim()
document
. Пришел сюда с помощьюcheerio
.Проще и быстрее:
источник
get(0)
вместо просто[0]
?Похож на принятый ответ, но без клонирования:
И вот для этого есть плагин jQuery:
Вот как использовать этот плагин:
источник
.contents()
очень важно!это не код:
просто становиться jQuery ради jQuery? Когда простые операции включают в себя столько цепочек команд и столько (ненужной) обработки, возможно, пришло время написать расширение jQuery:
звонить:
аргументы в случае, если встречается другой сценарий, такой как
текст будет иметь значение:
источник
Попробуй это:
источник
Это должно быть что-то с учетом потребностей, которые зависят от структуры, с которой вы представлены. Для приведенного вами примера это работает:
Демо-версия: http://jquery.nodnod.net/cases/2385/run
Но это в значительной степени зависит от того, насколько разметка похожа на то, что вы опубликовали.
источник
clone
метод здесь, если это не предполагаемый эффект..detach()
метод вместо.remove()
.Краткий вариант ответа Стюарта.
или с
get()
источник
источник
Это старый вопрос, но главный ответ очень неэффективен. Вот лучшее решение:
И просто сделай это:
источник
Я предполагаю, что это также было бы хорошим решением - если вы хотите получить содержимое всех текстовых узлов, которые являются прямыми потомками выбранного элемента.
Примечание. В документации jQuery для объяснения функции содержимого используется похожий код: https://api.jquery.com/contents/.
PS Есть также немного более уродливый способ сделать это, но это показывает более подробно, как все работает, и позволяет использовать собственный разделитель между текстовыми узлами (возможно, вы хотите, чтобы разрыв строки был там)
источник
Я предлагаю использовать createTreeWalker для поиска всех текстовых элементов, не привязанных к html-элементам (эту функцию можно использовать для расширения jQuery):
источник
Если положение
index
текстового узла фиксировано среди его братьев и сестер, вы можете использоватьисточник
Не уверен, насколько гибким или сколько случаев вам нужно это покрыть, но для вашего примера, если текст всегда предшествует первым HTML-тегам - почему бы просто не разделить внутренний html на первый тег и взять первый:
и если вам нужно шире, может быть, просто
и если вам нужен текст между двумя маркерами, например, после одной вещи, но перед другой, вы можете сделать что-то вроде (непроверенное) и использовать операторы if, чтобы сделать его достаточно гибким, чтобы иметь маркер начала или конца или оба, избегая ошибок нулевых ссылок :
Я обычно делаю вспомогательные функции для таких полезных вещей, как это, освобождаю их от ошибок, а затем часто полагаюсь на них, а не переписываю этот тип манипуляции со строками, рискуя нулевыми ссылками и т. Д. Таким образом, вы можете повторно использовать функцию во многих проектах и никогда не нужно тратить на это время снова, отладка, почему ссылка на строку имеет неопределенную ошибку ссылки. Возможно, это не самый короткий однострочный код, но после того, как у вас есть функция полезности, она станет одной строкой. Обратите внимание, что большая часть кода просто обрабатывает параметры, присутствующие там или нет, чтобы избежать ошибок :)
Например:
источник
$('#listItem').html( newHTML )
; где newHTML - это переменная, в которой уже есть урезанный текст.Это хороший способ для меня
источник
Я придумал конкретное решение, которое должно быть гораздо более эффективным, чем клонирование и модификация клона. Это решение работает только со следующими двумя оговорками, но должно быть более эффективным, чем принятое в настоящее время решение:
С учетом сказанного, вот код:
источник
Так же , как вопрос, я пытался извлечь текст для того , чтобы сделать некоторые регулярное выражение замены текста , но получаю проблемы там , где мои внутренние элементы (т.е.
<i>
,<div>
,<span>
и т.д.) становились также удалены.Следующий код, кажется, работает хорошо и решил все мои проблемы.
Он использует некоторые ответы, представленные здесь, но, в частности, будет заменять текст только тогда, когда элемент имеет
nodeType === 3
.То, что сделано выше - это циклическое прохождение всех элементов данного
el
(которое было просто получено с помощью$("div.my-class[name='some-name']");
. Для каждого внутреннего элемента оно в основном игнорирует их. Для каждой части текста (как определеноif (this.nodeType === 3)
) это будет применять подстановку регулярных выражений только к этим элементам ,Эта
this.textContent = text
часть просто заменяет замещенный текст, который в моем случае я искал, например[[min.val]]
, токены и[[max.val]]
т. Д.Эта выдержка из короткого кода поможет любому, кто пытается сделать то, о чем спрашивал вопрос ... и немного больше.
источник
просто поместите это в
<p>
или<font>
возьмите этот $ ('# listItem font'). text ()Первое, что пришло в голову
источник
Вы можете попробовать это
источник
Используйте дополнительное условие, чтобы проверить, совпадают ли innerHTML и innerText. Только в тех случаях заменить текст.
http://jsfiddle.net/7RSGh/
источник
Чтобы иметь возможность обрезать результат, используйте DotNetWala, например, так:
Я обнаружил, что использование более короткой версии like
document.getElementById("listItem").childNodes[0]
не будет работать с trim () в jQuery.источник
document.getElementById("listItem").childNodes[0]
это простой javascript, вам нужно обернуть его в функцию jQuery$(document.getElementById("listItem").childNodes[0]).trim()
.trim()
в конец. Нужен ли этот ответ?Я не эксперт JQuery, но как насчет,
источник
Это не проверено, но я думаю, что вы можете попробовать что-то вроде этого:
http://api.jquery.com/not/
источник
$('#listItem').text()
.#listItem
не<span>
так что добавлениеnot('span')
ничего не делает.