Para reemplazar el texto de cualquier elemento usando jQuery, use la función de texto junto con la función de reemplazo de JavaScript. Por ejemplo: $(“#elemento”).text($(“#elemento”).text().replace(“Hola”, “Adiós”));.
Aquí está el proceso paso a paso:
- Busque y seleccione el elemento que contiene el texto.
- Use la función de texto jQuery para obtener su texto.
- Reemplace el texto usando replace.
- Pase el resultado de este proceso a la función de texto del mismo elemento.
Digamos que tenemos una cadena que dice “Hola Paul” y queremos reemplazarla por “Bye Paul”.
Podemos hacerlo todo en una sola línea como esta:
$("#element").text($("#element").text().replace("Hi", "Bye"));
Si te parece un poco confuso, podemos dividirlo en varias líneas para que sea más fácil de leer:
const element = $("#element");
const textToReplace = element.text();
const newText = textToReplace.replace("Hi", "Bye");
element.text(newText);
¿Fácil verdad? Ahora, ¿qué pasa si quieres cambiar el texto al hacer clic en un botón? ¿O tal vez desea reemplazar varios párrafos?
Aquí hay una lista de los escenarios más comunes para el reemplazo de texto. Todos ellos usando jQuery:
Ejemplos reemplazando cadenas en jQuery:
Reemplace el texto de un elemento al hacer clic:
const changeText = (e) => {
const element = $("#element");
const textToReplace = element.text();
const newText = textToReplace.replace("Hi", "Bye");
element.text(newText);
};
$(document).on('click', '#changeText', changeText);
Reemplazar múltiples apariencias de la misma cadena
Para reemplazar todas las apariencias de una cadena, debemos usar expresiones regulares. En lugar de usar esto:
textToReplace.replace("Hi", "Bye");Tenemos que usar lo siguiente:
textToReplace.replace(/Hi/g, "Bye");
Observe que también eliminamos las comillas dobles alrededor de “Hola” y agregamos la bandera global g después de la última /. Esto es lo que nos permite buscar globalmente, es decir, buscar todas las apariencias de la cadena buscada.
Aquí hay un ejemplo:
var element = $("#element");
element.text(element.text().replace(/Hi/g, "Bye"));
Reemplazar varias palabras al mismo tiempo
Tendremos que usar una expresión regular como hicimos anteriormente, pero esta vez, para agregar varias palabras, las separaremos por |.
element.text(element.text().replace(/Hi|Hello|Hey/g, "Bye"));
Reemplazar texto que no distingue entre mayúsculas y minúsculas
Esto se aplica cuando desea reemplazar una cadena sin importar si aparece en mayúsculas, minúsculas o una combinación de ambas.
Nuevamente, tendremos que usar expresiones regulares para ello. Haremos uso de la bandera i que pasaremos después de la última /, junto con la g que permite una búsqueda global como se mencionó anteriormente:
element.text(element.text().replace(/hi/gi, "Bye"));
Reemplazar una palabra en múltiples textos
Imaginemos que queremos reemplazar una palabra en varios elementos de nuestro sitio web. Todo lo que tenemos que hacer es iterar sobre ellos y llamar a nuestra función o simplemente llamar a la función varias veces en cada uno de ellos:
$('#myList li').each(function(){
$(this).text($(this).text().replace(/Hi/g, "Bye"));
});
var element1 = $('#element1');
var element2 = $('#element2');element1.text(element1.text().replace(/Hi/g, "Bye"));
element2.text(element2.text().replace(/Hi/g, "Bye"));
Eliminar texto usando reemplazar
Por supuesto, puede usar este mismo método para reemplazar cualquier texto por una cadena vacía eliminando la cadena buscada de nuestro texto.
var element = $("#element");
element.text(element.text().replace("Hi", ""));
Reemplazar un texto completo, una palabra o una oración
Podemos reemplazar el texto completo de cualquier elemento en nuestra página usando la función de texto de jQuery. Es aún más simple todavía:
$("#element").text("What's up!");Reemplazar cadena HTML con jQuery
De manera similar, podemos reemplazar todo el contenido HTML usando la función html:
$("#element").html("<i>This is my italic text</i>");conclusión
Al usar jQuery en combinación con funciones de JavaScript, podemos reemplazar cadenas en elementos, textos e incluso variables de JavaScript.
A diferencia de otros lenguajes, en JavaScript la sustitución de múltiples apariencias nos obliga a utilizar expresiones regulares. Esto puede ser un poco más aterrador al principio y una vez que conoces la base, se abre un nuevo mundo de oportunidades para nosotros.
Espero que este artículo sirva como una forma de aclarar las diferentes formas en que podemos usar jQuery para reemplazar cadenas y textos en su sitio.
Si está aprendiendo JavaScript, ¡vea cuál es la mejor manera de aprender JavaScript!
Artículos relacionados
