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.

Obtener una matriz de elementos a partir de un fragmento de cadena.

06 Jun, 2023 Programación

Tengo un literal de plantilla con elementos HTML adentro, quiero ejecutarlo a través de una función y obtener una matriz de todos los elementos con su cadena.

const tmp = `
<div>
  <h1>Heading <span>inline</span></h1>
  <button>Click Me</button>
</div>
`

esto debería darme:

["<h1>Heading <span>inline</span></h1>", "<span>inline</span>", "<button>Click Me</button>"]

¿Cómo lo haría?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr esto, primero puede convertir el literal de plantilla en un elemento HTML real mediante la API DOMParser. Después, puede utilizar el método querySelectorAll para obtener todos los elementos dentro del elemento HTML recién creado. Por último, puede hacer un mapeo sobre el NodeList resultante y devolver una matriz de la propiedad outerHTML de cada elemento.

    Aquí está el código que lograría esto:

    const tmp = `
  <div>
    <h1>Encabezado <span>en línea</span></h1>
    <button>Haz clic</button>
  </div>
`;

const parser = new DOMParser();
const doc = parser.parseFromString(tmp, 'text/html');

const elements = doc.querySelectorAll('*');

const result = Array.from(elements).map(el => el.outerHTML);
console.log(result);
// Salida: ["<div><h1>Encabezado <span>en línea</span></h1><button>Haz clic</button></div>", "<h1>Encabezado <span>en línea</span></h1>", "<span>en línea</span>", "<button>Haz clic</button>"]

    Esto debería darte la matriz deseada de todos los elementos con sus cadenas correspondientes.

Comments are closed.