Convertir cadena a HTML en JavaScript
-
Use la propiedad
innerHTMLpara convertir una cadena en un objeto HTML -
Utilice la interfaz
DOMParser()para convertir una cadena en un objeto HTML -
Use
jQuerypara asegurar el tipo de cadena pasada en HTML
En JavaScript, alguna convención específica hace que el historial de desarrollo general esté un paso adelante para integrarse. Del mismo modo, una de las formas no estáticas de direccionar una cadena (en forma de un patrón de donación de elementos HTML) y luego pasarla al cuerpo HTML como una pieza única de objeto.
Esto hace que la interfaz sea dinámica y puede resolver muchos problemas que de otro modo habrían sido difíciles de resolver.
Los ejemplos de código en el siguiente contenido demostrarán cómo implementar esta conversión. En primer lugar, pasaremos la cadena con la propiedad innerHTML.
En el siguiente ejemplo, utilizaremos el método DOM parse. Esta convención no se recomienda en su mayoría, ya que tiene problemas con la aceptación de muchos navegadores.
En la sección final, examinaremos si la cadena que pasamos era un objeto HTML o solo cadenas. ¡Vamos a sumergirnos!
Use la propiedad innerHTML para convertir una cadena en un objeto HTML
Aquí, tendremos una función stringToHTML que tomará la cadena sin formato como su parámetro. Después de eso, crearemos un div, y deseamos pasar la cadena dada dentro de eso.
También podríamos pasarlo al cuerpo HTML, pero para estar limpios, esperamos un elemento div.
A continuación, el div recién creado se asociará con una instancia dom (supuestamente). Entonces, para dom, estableceremos la propiedad innerHTML y luego pasaremos la cadena.
El return será la instancia de dom para la función stringToHTML que creamos. Revisemos las líneas de 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>Document</title>
</head>
<body>
<script src="abc.js"></script>
</body>
</html>
var stringToHTML = function(str) {
var dom = document.createElement('div');
dom.innerHTML = str;
return dom;
};
console.log(stringToHTML('<h1>Hello world!</h1><p>How are you today?</p>'));
Producción:
Utilice la interfaz DOMParser() para convertir una cadena en un objeto HTML
El DOMParser() a menudo se ignora o se puede usar junto con condiciones. Si la forma anterior de manejar los problemas se borra, entonces este segmento de código podría activarse para respaldar el proceso.
Así que aquí, tomaremos una instancia de la interfaz DOMParser(), y la instancia será activada por parseFromString(). Los parámetros serán la cadena y el tipo en HTML que se supone que representa.
Luego pasaremos la instancia doc al cuerpo HTML.
Fragmento de 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>Document</title>
</head>
<body>
<script src="2.js"></script>
</body>
</html>
var stringToHTML = function(str) {
var parser = new DOMParser();
var doc = parser.parseFromString(str, 'text/html');
return doc.body;
};
console.log(
stringToHTML('<h1>Hello world!</h1><p>I am fine Thank you! ^_^</p>'));
Producción:
-Interface-to-Convert-String-to-HTML-Object.webp)
Use jQuery para asegurar el tipo de cadena pasada en HTML
En esta sección, determinaremos la tarea general. Verificaremos si se realizó el objeto HTML, el tipo, etc.
Si podemos usar jQuery para pasar una cadena, va a HTML en forma de objeto. Aunque el contenido no ha sido previsualizado, ha creado su espacio en el cuerpo HTML (no permanente).
Entonces, saltemos al bloque de 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>Document</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="3.js"></script>
<script>
var stringToHTML = function (str) {
var d = $(str);
return d;
}
console.log(stringToHTML('<h1>Hello world!</h1><p>How are you today?</p>'));
</script>
</body>
</html>
Producción:
