Замените только текст внутри div, используя jquery

76

У меня есть 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.

  • 0
    Может быть полезно сделать скрипку
  • 0
    Используйте $ ('# one'). Find ('. First'). Text ('Привет, я заменяю'); вместо $ ('# one'). text (); или вы можете напрямую получить доступ к элементу и заменить текст, используя $ ('. first'). text ('Привет, я заменяю');
Теги:

5 ответов

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

Текст не должен быть сам по себе. Поместите его в элемент 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');
Поделиться
  • 34
    Это не отвечает на вопрос ОП, который не сказал, что они контролируют HTML.
  • 1
    это работает, но как можно выполнить или нет? я могу запустить исключение, если пусто или тег изменился? в неудачных привязках, потому что этот div создан code.from REST или базой данных
Показать ещё 1 комментарий
84

Найдите текстовые узлы (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/

Поделиться
  • 6
    Действительно отличный ответ!
  • 5
    Это должен быть принятый ответ, так как это не требует от вас изменения HTML!
Показать ещё 2 комментария
11

Вам нужно установить текст для чего-то другого, кроме пустой строки. Кроме того, функция .html() должна делать это, сохраняя структуру HTML div.

$('#one').html($('#one').html().replace('text','replace'));
Поделиться
  • 0
    Хотя в этом случае это будет работать, мне не нравится эта опция, потому что если вы заменяете слово «first» словом «second» или просто «i» на «», это испортит ваши теги
7

Если вы действительно знаете текст, который собираетесь заменить, вы можете использовать

$('#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/

Поделиться
  • 1
    Из jQuery 1.8.3 $('#one').contents(':not(*)') ничего не выберет.
0

Другой подход - сохранить этот элемент, изменить текст, а затем добавить этот элемент назад

const star_icon = $(li).find('.stars svg')
$(li).find('.stars').text(repo.stargazers_count).append(star_icon)
Поделиться

Ещё вопросы

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