2012-08-08 25 views
82

tengo un div como:Reemplazar único texto dentro de un div con jQuery

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

Estoy tratando de cambiar sólo el texto de "Hola soy texto" a "Hola Estoy reemplazar" usando jQuery. Esto podría ser fácil pero no puedo hacerlo.

Usando $('#one').text('') simplemente vacía el total #One div.

+0

Podría ser útil hacer una [violín] (http://jsfiddle.net) – Inkbug

+0

Use $ ('# one'). Find ('. First'). Text ('Hola, soy reemplazar'); en lugar de $ ('# one'). text(); o puede acceder directamente al elemento y reemplazar el texto usando $ ('. first'). text ('Hola, soy reemplazar'); –

Respuesta

109

El texto no debe ser independiente. Ponlo en un elemento span.

Cambio 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'); 
+21

Esto no responde a la pregunta del OP, que no dijo que tienen control sobre el HTML. – tar

+0

esto funciona, pero ¿cómo se puede ejecutar o no? ¿Puedo ejecutar una excepción si está en blanco o la etiqueta ha cambiado? en enlaces no exitosos porque este div creado por código.Desde REST o base de datos –

11

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

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

Si bien esto funcionaría en este caso, no me gusta esta opción porque si reemplazara la palabra "primero" con la palabra "segundo" o simplemente "yo" con '' arruinaría sus etiquetas – JSON

84

Encuentra los nodos de texto (nodeType==3) y sustituir el 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 vivo: http://jsfiddle.net/VgFwS/

+5

¡Muy buena respuesta! – wcolbert

+2

Esta debería ser la respuesta aceptada ya que esto no requiere que cambie el html. –

+1

@Jamiec FWIW Me encanta esta respuesta, ya que permite reemplazos sin preocuparse por borking el marcado/scripts, etc. – sehe

7

Si realmente conoce el texto que se va a sustituir podría utilizar

$('#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 no de elementos en este caso los nodos de texto y el segundo nodo es el que queremos sustituir.

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

+1

De 'jQuery 1.8.3' '$ ('# one'). Contents (': not (*)')' no seleccionará nada. – BruceHill

0

Otro enfoque es mantener ese elemento, cambie el texto, tiene que poner ese elemento posterior

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