Заменить только текст внутри 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>