Reemplazar solo el texto dentro de un div usando jquery

104

Tengo un div como:

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

Estoy tratando de cambiar solo el texto de "Hola, soy texto" a "Hola, soy reemplazar" usando jquery. Esto puede resultar fácil, pero no puedo hacerlo.

Usar $('#one').text('')solo vacía todo el #Onediv.

manojadams
fuente
Podría ser útil hacer un violín
Inkbug
Use $ ('# one'). Find ('. First'). Text ('Hola, soy reemplazo'); en lugar de $ ('# uno'). text (); o puede acceder directamente al elemento y reemplazar el texto usando $ ('. first'). text ('Hola, soy reemplazar');
Kartik Chauhan

Respuestas:

134

El texto no debería estar solo. Ponlo en un spanelemento.

Cámbielo a esto:

<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
fuente
51
Esto no responde a la pregunta del OP, que no dijo que tienen control sobre el HTML.
Tar
1
esto funciona, pero ¿cómo se puede ejecutar o no? ¿Puedo ejecutar una excepción si se cambia la etiqueta o el espacio en blanco? en enlaces fallidos porque este div creado por código. de REST o base de datos
saber tabatabaee yazdi
122

Busque los nodos de texto ( nodeType==3) y reemplace textContent:

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

Ejemplo en vivo: http://jsfiddle.net/VgFwS/

Jamiec
fuente
6
¡Realmente una gran respuesta!
wcolbert
6
¡Esta debería ser la respuesta aceptada, ya que no requiere que cambie el html!
Wouter Rutgers
2
@Jamiec Fwiw Me encanta esta respuesta, ya que permite sustituciones sin preocuparse por Borking el margen de beneficio / scripts, etc.
sehe
3
Esto funcionó perfectamente para mí. A veces trabajamos en situaciones que no permiten cambiar el HTML (es decir, SharePoint). Gracias
Mark P.
14

Debe configurar el texto en algo que no sea una cadena vacía. Además, la función .html () debería hacerlo conservando la estructura HTML del div.

$('#one').html($('#one').html().replace('text','replace'));
gcochard
fuente
Si bien esto funcionaría en este caso, no me gusta esta opción porque si estuviera reemplazando la palabra "primero" con la palabra "segundo" o simplemente 'i' con '' se estropearían sus etiquetas
JSON
10

Si realmente conoce el texto que va a reemplazar, puede usar

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

http://jsfiddle.net/5rWwh/

O

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

$('#one').contents(':not(*)') selecciona nodos secundarios que no son elementos en este caso, nodos de texto y el segundo nodo es el que queremos reemplazar.

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

Musa
fuente
2
De jQuery 1.8.3 $('#one').contents(':not(*)')no seleccionará nada.
BruceHill
0

Otro enfoque es mantener ese elemento, cambiar el texto y luego agregar ese elemento de nuevo

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

Por si acaso no puede cambiar HTML. Muy primitivo pero corto y funciona. (Vaciará el div principal, por lo tanto, se eliminarán los divs secundarios)

$('#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
fuente
1
Esto elimina todos los divs secundarios de #one
Scot Nery
1
@ScotNery gracias, he actualizado la respuesta. (Aunque técnicamente responde a esta pregunta en particular) Supongo que, además de envolver el texto con una etiqueta que tiene una identificación, sería bastante desafiante. Solo otra cosa es hacer coincidir una cadena para reemplazar, pero es realmente frágil.
Mesa de retorno del