Хранить только «голый» текст в теге

0

У меня есть этот базовый HTML:

<h2>Edit <small>additional text</small></h2>
<div id="result"></div>

Я могу легко получить текст "Изменить" ("голый"), удалив "маленький" тег:

var onlytext = $( "h2" ).prop( "firstChild" ).nodeValue;
$( "#result" ).append(onlytext);

Вот скрипка, и пока все хорошо: http://jsfiddle.net/822dm/

Теперь я хотел бы добавить значок перед текстом, получив следующее:

<h2><i class="fa fa-edit"></i> Edit <small>additional text</small></h2>
<div id="result"></div>

Но в этом случае javascript перестает работать: http://jsfiddle.net/822dm/1/

Я попробовал var onlytext = $( "h2").prop( "firstChild").text(); : это удаляет значок, но сохраняет текст "малого" тега

Пожалуйста, помогите? Учтите, что метки "i" и "small" могут быть необязательными
Заранее спасибо!

  • 0
    Это потому, что firstChild больше не является словом Edit , но теперь это fa fa-edit класс.
  • 0
    Правильно, Алекс, но как мне сказать "сохранить только текст, который не находится внутри тега - он же голый текст"?
Теги:

4 ответа

2
Лучший ответ

Все, что вам нужно сделать, - удалить дочерние элементы <h2>. Так что вы получите текст " Edit как текст".

Посмотрите эту скрипку

Надеюсь, поможет.

Поделиться
  • 0
    Похоже на то, что я положил. Не знаю, лучше ли сделать 5 функций JQuery или заменить Regex, или это вообще имеет значение :)
  • 0
    @JamieBarker Я согласен с тобой, Джейми. Простое решение для регулярных выражений, которое вы разместили, лучше. Но OP более специфичен для jQuery-решений.
3

Один из возможных подходов:

var onlytext = $('h2').contents().filter(function(){return this.nodeType===3});
$('#result').append(onlytext.clone());

Демо. Это просто, на самом деле: с .contents() собираются только ближайшие дочерние элементы выбранного элемента, затем результат фильтруется, поэтому остаются только текстовые узлы. Собственно, эта строка...

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

... очень распространенная идиома, когда вы работаете с текстом в jQuery.

Поделиться
  • 0
    Это кажется хорошим, но текст «Правка» исчез из <h2> в скрипке!
  • 0
    Ах да, конечно. ) Исправлено с clone .
2

Вы можете использовать Regex для удаления всех тэгов html:

http://jsfiddle.net/jabark/822dm/6/

var onlytext = $('h2').html();
onlytext = onlytext.replace(/\<.*?\>[^\<]*?\<\/.*?\>/g, '');
$( "#result" ).append(onlytext);
Поделиться
1

Почему вы пытаетесь добавить взломать это?

Измените свой HTML-бит и деформируйте свой текст в теге span

<h2><i class="fa fa-edit"></i> <span>Edit</span> <small>additional text</small></h2>

а затем вы можете сделать что-то вроде $("h2 span").text().

Поделиться
  • 0
    Было бы также мое решение посмотреть на это: jsfiddle.net/822dm/2
  • 0
    ммм ... я бы хотел избежать лишней разметки
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню