Заменить только текст внутри div с помощью jquery

106

У меня есть div вроде:

<div id="one">
       <div class="first"></div>
       "Hi I am text"
       <div class="second"></div>
       <div class="third"></div>
</div>

Я пытаюсь изменить только текст с «Привет, я текст» на «Привет, я заменяю» с помощью jquery. Это может быть легко, но я не могу этого сделать.

Использование $('#one').text('')просто очищает весь #Onediv.

javascript jquery

— Manojadams
источник

Может быть полезно сделать скрипку

— Inkbug

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

— Kartik Chauhan

136

Текст не должен быть сам по себе. Поместите это в 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');

— Брайан Устас
источник

51

Это не отвечает на вопрос ОП, который не сказал, что у них есть контроль над HTML.

— tar

1

это работает, но как быть уверенным в выполнении или нет? могу ли я запустить исключение, если пусто или тег изменен? в неудачных привязках, потому что этот div создан с помощью кода из REST или базы данных

— saber tabatabaee yazdi

122

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

— Jamiec
источник

6

Действительно отличный ответ!

— wcolbert

7

Это должен быть принятый ответ, поскольку для этого не требуется изменять html!

— Wouter Rutgers

2

@Jamiec FWIW Мне нравится этот ответ, потому что он позволяет производить замену, не беспокоясь о разметке / скриптах и т. Д.

— см.

3

Это отлично сработало для меня. Иногда мы работаем в ситуациях, которые не позволяют изменять HTML (например, SharePoint). Спасибо

— Марк П.

14

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

$('#one').html($('#one').html().replace('text','replace'));

— Gcochard
источник

Хотя в данном случае это сработает, мне не нравится этот вариант, потому что если бы вы заменили слово «первый» словом «второй» или просто «я» на «», это

— JSON

10

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

$('#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(*)') выбирает дочерние узлы, не являющиеся элементами, в этом случае текстовые узлы, а второй узел - это тот, который мы хотим заменить.

http://jsfiddle.net/5rWwh/1/

— Муса
источник

2

Из 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)

— onmyway133
источник

0

На всякий случай, если вы не можете изменить 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>

Развернуть фрагмент

— ReturnTable
источник

1

Это удаляет все дочерние блоки #one

— Скот Нери

1

@ScotNery спасибо, я обновил ответ. (Хотя технически он отвечает на этот конкретный вопрос) Я предполагаю, что кроме обертывания текста тегом с идентификатором это было бы довольно сложно. Другое дело - сопоставить заменяемую строку, но она действительно хрупкая.

— ReturnTable