У меня есть этот базовый 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" могут быть необязательными
Заранее спасибо!
Все, что вам нужно сделать, - удалить дочерние элементы <h2>
. Так что вы получите текст " Edit
как текст".
Посмотрите эту скрипку
Надеюсь, поможет.
Один из возможных подходов:
var onlytext = $('h2').contents().filter(function(){return this.nodeType===3});
$('#result').append(onlytext.clone());
Демо. Это просто, на самом деле: с .contents() собираются только ближайшие дочерние элементы выбранного элемента, затем результат фильтруется, поэтому остаются только текстовые узлы. Собственно, эта строка...
.contents().filter(function(){return this.nodeType===3});
... очень распространенная идиома, когда вы работаете с текстом в jQuery.
clone
.
Вы можете использовать Regex для удаления всех тэгов html:
http://jsfiddle.net/jabark/822dm/6/
var onlytext = $('h2').html();
onlytext = onlytext.replace(/\<.*?\>[^\<]*?\<\/.*?\>/g, '');
$( "#result" ).append(onlytext);
Почему вы пытаетесь добавить взломать это?
Измените свой HTML-бит и деформируйте свой текст в теге span
<h2><i class="fa fa-edit"></i> <span>Edit</span> <small>additional text</small></h2>
а затем вы можете сделать что-то вроде $("h2 span").text()
.
firstChild
больше не является словомEdit
, но теперь этоfa fa-edit
класс.