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

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