Substitua apenas o texto dentro de um div usando jquery

104

Eu tenho um div como:

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

Estou tentando alterar apenas o texto de "Oi, sou o texto" para "Oi, sou substituir" usando jquery. Isso pode ser fácil, mas não sou capaz de fazer isso.

Usar $('#one').text('')apenas esvazia todo o #Onediv.

javascript jquery

— manojadams
fonte

Pode ser útil fazer um violino

— Inkbug

Use $ ('# um'). Find ('. Primeiro'). Text ('Olá, eu sou substituir'); em vez de $ ('# um'). text (); ou você pode acessar diretamente o elemento e substituir o texto usando $ ('. first'). text ('Olá, eu sou substituir');

— Kartik Chauhan

134

O texto não deve estar sozinho. Coloque-o em um spanelemento.

Altere para este:

<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');

— Brian Ustas
fonte

51

Isso não responde à pergunta do OP, que não disse que tem controle sobre o HTML.

— alcatrão de

1

isso funciona, mas como posso garantir que será executado ou não? posso executar exceção se em branco ou tag alterada? em ligações malsucedidas porque este div foi criado por code.from REST ou banco de dados

— sabre tabatabaee yazdi

122

Encontre os nós de texto ( nodeType==3) e substitua textContent:

$('#one').contents().filter(function() {
    return this.nodeType == 3
}).each(function(){
    this.textContent = this.textContent.replace('Hi I am text','Hi I am replace');
});

Exemplo ao vivo: http://jsfiddle.net/VgFwS/

— Jamiec
fonte

6

Resposta realmente ótima!

— wcolbert

6

Esta deve ser a resposta aceita, pois não requer que você altere o html!

— Wouter Rutgers

2

@Jamiec FWIW Eu adoro esta resposta porque permite substituições sem me preocupar em sobrecarregar a marcação / scripts etc.

— ver

3

Isso funcionou perfeitamente para mim. Às vezes trabalhamos em situações que não permitem alterar o HTML (ou seja, o SharePoint). Obrigado

— Mark P.

14

Você precisa definir o texto para algo diferente de uma string vazia. Além disso, a função .html () deve fazer isso preservando a estrutura HTML do div.

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

— gcochard
fonte

Embora funcione neste caso, não gosto desta opção porque se você substituísse a palavra "primeiro" pela palavra "segundo" ou apenas 'i' por '', isso bagunçaria suas tags

— JSON

10

Se você realmente sabe o texto que vai substituir, pode usar

$('#one').contents(':contains("Hi I am text")')[0].nodeValue = '"Hi I am replace"';

http://jsfiddle.net/5rWwh/

Ou

$('#one').contents(':not(*)')[1].nodeValue = '"Hi I am replace"';

$('#one').contents(':not(*)') seleciona nós filhos não-elementos neste caso nós de texto e o segundo nó é aquele que queremos substituir.

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

— musa
fonte

2

De jQuery 1.8.3 $('#one').contents(':not(*)')não selecionará nada.

— BruceHill

0

Outra abordagem é manter esse elemento, alterar o texto e anexar esse elemento de volta

const star_icon = $(li).find('.stars svg')
$(li).find('.stars').text(repo.stargazers_count).append(star_icon)

— onmyway133
fonte

0

Apenas no caso de você não conseguir alterar o HTML. Muito primitivo, mas curto e funciona. (Isso esvaziará o div pai, portanto, os divs filhos serão removidos)

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

Expandir trecho

— ReturnTable
fonte

1

Isso remove todos os divs filhos de #one

— Scot Nery

1

@ScotNery obrigado, atualizei a resposta. (Embora tecnicamente responda a essa pergunta em particular) Estou assumindo que, além de envolver o texto com uma tag que tem um id, seria bastante desafiador. Outra coisa é combinar uma string para substituir, mas é muito frágil.

— Tabela Retornável de