es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Reemplazando cada nodo en el selector de Cheerio.

25 Jul, 2023 Programación

Estoy utilizando cheerio.js para analizar algunos documentos HTML, pero estoy enfrentando ciertos problemas.

Lo que sucede es que el archivo HTML que estoy usando contiene el siguiente código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>

</title>

</head>
<body>
    <p>Texto 1</p>
    <p>Texto 2</p>
</body>
</html>

Ahora, también tengo un array de elementos en JavaScript como este:

var items = ["<h2>naranja</h2>", "<h2>mango</h2>"];

Lo que quiero hacer es simplemente reemplazar cada etiqueta P con el elemento respectivo en el array de items, es decir, algo como esto:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>

</title>

</head>
<body>
    <h2>naranja</h2>
    <h2>mango</h2>
</body>
</html>

Lo que he intentado hasta ahora:

var selections = $("p");

for ( let index = 0; index < selections.length; index++ ) {

selections[index].replaceWith(items[index])    

}

Pero dice que la función replaceWith() no es válida.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para resolver el problema, puedes modificar tu código para usar el método .html() de jQuery para reemplazar el contenido de cada etiqueta p con el respectivo elemento en el arreglo items. Aquí está cómo:

    // Usa cheerio para cargar el archivo HTML y crear un objeto similar a jQuery
const $ = cheerio.load(tuArchivoHtml);

// Define el arreglo de elementos
const items = ["<h2>naranja</h2>", "<h2>mango</h2>"];

// Recorre cada etiqueta p y reemplaza su contenido con el respectivo elemento
$("p").each((index, element) => {
  $(element).html(items[index]);
});

// Muestra en consola el contenido HTML modificado
console.log($.html());

    Este código debería producir el resultado deseado:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>

    </title>
</head>
<body>
    <h2>naranja</h2>
    <h2>mango</h2>
</body>
</html>

Comments are closed.