Заменить только текст внутри div, используя jquery
У меня есть div как:
<div id="one">
<div class="first"></div>
"Hi I am text"
<div class="second"></div>
<div class="third"></div>
</div>
Я пытаюсь изменить только текст из "Привет, я текст" на "Привет, я заменен", используя jquery.
Это может быть легко, но я не могу этого сделать.
Использование $('#one').text('')
просто опустошает весь #One
div.
Ответы
Ответ 1
Текст не должен быть сам по себе. Поместите его в элемент span
.
Измените его так:
<div id="one">
<div class="first"></div>
<span>"Hi I am text"</span>
<div class="second"></div>
<div class="third"></div>
</div>
$('#one span').text('Hi I am replace');
Ответ 2
Найдите текстовые узлы (nodeType==3
) и замените textContent
:
$('#one').contents().filter(function() {
return this.nodeType == 3
}).each(function(){
this.textContent = this.textContent.replace('Hi I am text','Hi I am replace');
});
Пример в реальном времени: http://jsfiddle.net/VgFwS/
Ответ 3
Вам нужно установить текст для чего-то другого, кроме пустой строки. Кроме того, функция .html() должна делать это, сохраняя структуру HTML div.
$('#one').html($('#one').html().replace('text','replace'));
Ответ 4
Если вы действительно знаете текст, который собираетесь заменить, вы можете использовать
$('#one').contents(':contains("Hi I am text")')[0].nodeValue = '"Hi I am replace"';
http://jsfiddle.net/5rWwh/
или
$('#one').contents(':not(*)')[1].nodeValue = '"Hi I am replace"';
$('#one').contents(':not(*)')
выбирает неэлементные дочерние узлы, в этом случае текстовыми узлами и вторым node является тот, который мы хотим заменить.
http://jsfiddle.net/5rWwh/1/
Ответ 5
Другой подход - сохранить этот элемент, изменить текст, а затем добавить этот элемент назад
const star_icon = $(li).find('.stars svg')
$(li).find('.stars').text(repo.stargazers_count).append(star_icon)
Ответ 6
На всякий случай, если вы не можете изменить HTML. Очень примитивно, но коротко и работает. (Он опустошит родительский div, поэтому дочерние div будут удалены)
$('#one').text('Hi I am replace');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
<div class="first"></div>
"Hi I am text"
<div class="second"></div>
<div class="third"></div>
</div>