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

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

350 голосов
/ 09 августа 2010

Если у меня 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».

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

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

Ответы [ 23 ]

0 голосов
/ 27 марта 2018

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

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

0 голосов
/ 16 июля 2014

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

  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);
}
0 голосов
/ 09 августа 2010

просто поместите его в <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>
Страница:
...