HOWTO · jQuery

Método jQuery replace()

En la publicación de hoy, aprenderemos sobre el método de reemplazo en jQuery.

En esta página

Esta publicación discutirá la capacidad de reemplazo de jQuery, que devuelve una nueva cadena después de reemplazar cada detalle del objetivo con un elemento coincidente. Este enfoque se puede utilizar para reemplazar la aparición de cualquier cadena en una oración o en un grupo de cadenas.

Solo el ejemplo principal puede cambiarse en el enfoque reemplazar (). Se debe utilizar el modificador global (g) para eliminar todas las ocurrencias.

reemplazar() en jQuery

jQuery ofrece varias funcionalidades para ayudar a administrar el DOM, siendo una de ellas el reemplazo del DOM. Usando el enfoque reemplazar() de jQuery, buscaremos y reemplazaremos todas las ocurrencias de una subcadena seleccionada en una cadena o una cadena en una colección de cadenas.

jQuery también ofrece los métodos replaceAll() y replaceWith() para la manipulación de DOM con la función replace.

El método replaceAll() reemplaza cada elemento de destino con un conjunto de elementos coincidentes. El método replaceWith() reemplaza cada elemento con el nuevo contenido proporcionado y devuelve el conjunto de elementos eliminados.

Sintaxis:

string.replace (/[oldString]/+/g, 'newString')
$(content).replaceAll(selector)
$(selector).replaceWith(content, function(i))
  1. El contenido es un parámetro obligatorio que especifica el contenido que se insertará, siendo los posibles valores elementos HTML, objetos jQuery y elementos HTML.
  2. La función(i) es un parámetro opcional que especifica una función que devuelve el contenido a reemplazar.

Entendámoslo con el siguiente ejemplo sencillo.

<p>Welcome to jQuery!</p>
<button >
Change
</button>
$(document).ready(function() {
  $('button').on('click', () => {
    $('p').text((index, text) => {
      return text.replace(/jQuery/g, 'Delftstack');
    });
  })
});

En el ejemplo anterior, el método jQuery replace() busca el valor de cadena especificado jQuery y devuelve el valor replace especificado Delftstack.

Pruebe y ejecute el fragmento de código anterior en cualquier navegador que admita jQuery, que mostrará el resultado.

Antes de reemplazar():

antes de reemplazar la función

Después de reemplazar():

después de reemplazar la función

Manifestación