JQuery cambia el texto interno pero conserva html

Me gustaría cambiar el texto de un elemento HTML pero conservar el rest del html interno con jQuery.

Por ejemplo:

Some text  

reemplace “Algún texto” por “Otro texto”, y el resultado debería ser similar a:

 Other text  

EDITAR: Mi solución actual es la siguiente:

 var aElem = $('a'); var children = aElem.children(); aElem.text("NEW TEXT"); aElem.append(children); 

Pero debe haber una manera más elegante de hacer esto.

Esto parece funcionar bien.

Demo en vivo

     Some text      

Como no puede modificar el enlace, una opción sería simplemente replace

 $("a").html($("a").html().replace("Some text", "Other text")); 

Ejemplo en jsfiddle .

Ajustar el texto que desea cambiar en un lapso

 Some text  $('a span').html( 'new text' ); 

Mi solución, aunque un poco tarde.

 $('a').each(function() { var contents = $(this).contents(); if (contents.length > 0) { if (contents.get(0).nodeType == Node.TEXT_NODE) { $(this).html('NEW TEXT').append(contents.slice(1)); } } }); 

Algunas notas:

  1. contents() incluye nodos de texto, a diferencia de los children() .
  2. Es necesario crear una copia de los contenidos a través de var contents = ... o bien los elementos restantes se pierden para siempre una vez reemplazado por $(this).html('NEW TEXT') .
  3. La verificación de la length es opcional pero recomendada.
  4. La comprobación de nodeType es opcional pero recomendada.

Una forma alternativa sería usar el método contents() siguiente manera:

Dado

 Some text  

puedes reemplazar 'Some text' con jQuery

 var text = $('a').contents().first()[0].textContent; $('a').contents().first()[0].textContent = text.replace("Some text", "Other text"); 

Ejemplo jsFiddle aquí .

La idea de los contents() se inspiró en esta pregunta, respondida por el usuario charlietfl.

Una manera eficiente y robusta que no requiere que sepa cuáles son los elementos internos o qué es el texto:

 var $a = $('a'); var inner = ''; $a.children.html().each(function() { inner = inner + this.outerHTML; }); $a.html('New text' + inner); 

prueba este código

 $('a').live('click', function(){ var $img = $(this).find('img'); $(this).text('changed'); $(this).append($img); }); 

Puede cambiarlo por .contents ()

 $('.yourElement').contents()[0].data = 'New Data'; 

donde en su caso el “[0] .data” es su información de texto

Tendrá que agregar un elemento y cambiar el texto de ese elemento, por ejemplo:

 Some text 

Entonces, puedes llamar desde jQuery:

 $("#foo").html("Other text"); 

Y su resultado será efectivamente:

 Other text 

Esta es una mejora que he realizado en la biblioteca jquery.uniform. Específicamente, la función $.uniform.update() . Tomé la idea de acheong87 y la cambié un poco.

La idea es cambiar el texto en un lapso pero preservar el HTML interno y los enlaces de eventos. No es necesario almacenar y agregar HTML de esta manera.

 if ($e.is("input[type=button]")) { spanTag = $e.closest("span"); var contents = spanTag.contents(); if (contents.length) { var text = contents.get(0); // Modern browsers support Node.TEXT_NODE, IE7 only supports 3 if (text.nodeType == 3) text.nodeValue = $e.val(); } } 

Agregué una función jQuery para esa necesidad.

puede que necesite convertir las entidades html a la representación de texto, así que decodeEntities función decodeEntities .

 function decodeEntities(encodedString) { if (typeof encodedString != "string") return encodedString; if (!encodedString) return ""; var textArea = document.createElement('textarea'); textArea.innerHTML = encodedString; return textArea.value; } jQuery.fn.textOnly = function(n) { if (this.length > 0) $(this).html(decodeEntities($(this).html()).replace($(this).text(), n)); return $(this); } 

Ejemplo de uso $('selector').textOnly('some text')

Mi versión genérica:

 let button = $('#yourElement'); button.html(button.html().replace(button[0].innerText, "New Text")); 

Taquigrafía para cambiar más elementos y texto principal:

 elemshtml = ''; $("a *").each(function(){elemshtml +=$(this)[0].outerHTML}); $("a").html('Some text' + elemshtml);