1

Estoy tratando de reemplazar el valor de una cadena de una página HTML, mediante Jquery. El texto a reemplazar se encuentra dentro de una etiqueta span, de la siguiente manera:

<span id='span_id'> 
    <a href="pagina2.html"> Saltar a página 2 </a> 
    Texto a reemplazar  
</span>
  1. Mediante jquery puedo obtener el valor del html del span y asignarlo a una variable:

    var texto =   $("#span_id").html();
    
  2. Reemplazar el texto deseado:

    texto = texto.replace("Texto  a reemplazar", "Nuevo Texto");
    
  3. Volver asignarle el html al elemento span ya con el texto traducido:

    $("#span_id").html(texto);
    

Este procedimiento funciona muy bien, de manera general, sin embargo mi Enlace: <a href="pagina2.html"> Saltar a página 2 </a>, tiene una funcionalidad que al hacer clic, activa un pop up con una serie de funcionalidades que al reescribir el DOM como aparece en el inspector para poder reemplazar la cadena, y volver a asignar al DOM, se pierde esta funcionalidad de popup.

De lo anterior, mi pregunta es ver si es posible obtener únicamente el valor de la cadena que se encuentra después del </a> y </span>, que tiene como valor : "Texto a reemplazar " asignarla a una variable, reemplazarla y volverla pegar al DOM, sin afectar la primera parte del contenido del que tiene que ver con el enlace , sin embargo no sé si esto es posible de hacer.

¿Alguien ha tenido alguna experiencia similar?

¡Muchas gracias y excelente día!

1
  • cómo asignas los eventos a los a ? seguramente se pueda reasignarlos delegando el bind a un parent el 12 jul. 2018 a las 23:56

2 respuestas 2

0

Podrias anidar dicho texto en otra etiqueta y allí recién modificar.

 <span id='span_id'> 
            <a href="pagina2.html"> Saltar a página 2 </a> 
             <p>Texto a reemplazar</p>
    </span>

Luego lo modificas, de esta forma no estarías perdiendo la funcionalidad de 'a'

$("#span_id p").text('Nuevo texto');

También podrías obtener el ultimo texto navegando por los nodos, y modificar, pero no sabría decirte si vas a perder los eventos de tu enlace, podrias probar:

Código original

 <span id='span_id'> 
    <a href="pagina2.html"> Saltar a página 2 </a> 
    Texto a reemplazar  
  </span>


$("#span_id).contents().last()[0].textContent = 'Nuevo texto';
1
  • Hola que tal @Luciano Montañez, la primera sugerencia, es muy buena, sin embargo por alguna razón no puedo modificar ese código fuente, que viene dentro de un CMS. Sin embargo he probado la segunda sugerencia, y resultó excelente, he podido modificar el texto, después del cierre de la etiqueta </a> y antes del </span> con el nuevo texto, sin alterar los eventos asociados al < a >. Agradezco enormemente tu sugerencia, excelente día!
    – Devgirl
    el 13 jul. 2018 a las 0:50
0

Con jQuery, puedes encontrar el elemento a, luego cambiar el texto y finalmente agregar de nuevo el a con prepend. Algo asi:

var a = $("#span_id").find('a');
$("#span_id").text("Nuevo texto");
$("#span_id").prepend(a);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id='span_id'> 
    <a href="pagina2.html"> Saltar a página 2 </a> 
    Texto a reemplazar  
</span>

1
  • Hola que tal alanfcm, muchas gracias por tu sugerencia, sin embargo al intentar hacer asignar nuevamente el texto mediante el método .html() o bien el método .text(), las propiedades de <a href=""> se pierden, por que como que reemplazan toda la cadena y entonces ya no se ejecuta el evento que tiene asociado en alguna parte del código al que hace referencia. Mi intención era únicamente modificar la parte del texto a modificar que va después del </a> Texto a Modificar </span> y antes de </span> para que el comportamiento del enlace no se viera afectado.
    – Devgirl
    el 13 jul. 2018 a las 15:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.