Convertir HTML en Javascript

HTML et JavaScript sont deux technologies très importantes dans le développement web. HTML est responsable de la structure et du contenu des pages Web, tandis que JavaScript est utilisé pour améliorer l'interactivité et la dynamique des pages Web. Dans le développement réel, nous devons souvent convertir du code HTML en code JavaScript afin de pouvoir l'utiliser dans l'application. Ci-dessous, je présenterai diverses méthodes pour convertir du code HTML en code JavaScript.

1. Utiliser innerHTML

innerHTML est un attribut très pratique en JavaScript, qui permet d'insérer du code HTML dans un élément. Par exemple, nous pouvons définir un élément HTML dans une page Web et définir son attribut innerHTML sur le code HTML qui doit être converti. Ensuite, utilisez JavaScript pour obtenir la valeur de l'attribut innerHTML de l'élément afin d'obtenir le code JavaScript correspondant.

Par exemple, nous devons convertir le code HTML suivant en code JavaScript :

<div>
  <h1>这是一个标题</h1>
  <p>这是一段文字</p>
</div>

Nous pouvons définir un élément en HTML et définir son attribut innerHTML sur celui qui doit être converti en code HTML, comme suit :

<div id="myHtml">
  <h1>这是一个标题</h1>
  <p>这是一段文字</p>
</div>

Ensuite, récupérez la valeur de l'attribut innerHTML de l'élément en JavaScript, comme suit :

var html = document.getElementById("myHtml").innerHTML;

À ce stade, le contenu du La variable html est le code JavaScript converti.

2. Utiliser des expressions régulières

En JavaScript, nous pouvons utiliser la fonction de correspondance des expressions régulières pour extraire diverses balises, valeurs d'attribut, etc. dans le code HTML, puis intégré au code JavaScript selon un format spécifique.

Par exemple, nous devons convertir le code HTML suivant en code JavaScript :

<div>
  <h1 class="title">这是一个标题</h1>
  <p>这是一段文字</p>
</div>

Nous pouvons utiliser des expressions régulières pour extraire les balises, les valeurs d'attribut, etc., comme suit :

var html = '<div><h1 class="title">这是一个标题</h1><p>这是一段文字</p></div>';
var tagsRegex = /(<(w+)>)/ig;
var attributesRegex = /([w-]+="[^"]*")/ig;

// 提取标签
html = html.replace(tagsRegex, function(match, p1) {
  return ''' + p1 + '',';  
});

// 提取属性值
html = html.replace(attributesRegex, function(match, p1) {
  return ''' + p1 + '',';  
});

console.log('createElement(' + html + ');');

Dans le code ci-dessus, nous utilisons deux expressions régulières pour extraire les balises et les valeurs d'attribut. Ensuite, nous utilisons la méthode replace de la chaîne pour remplacer le contenu correspondant dans le format dont nous avons besoin.

3. Utiliser des chaînes de modèles

Dans ES6, nous pouvons utiliser des chaînes de modèles pour épisser des chaînes. La chaîne de modèle prend en charge l'interpolation variable, le texte multiligne et d'autres fonctions, ce qui est très pratique.

Par exemple, nous devons convertir le code HTML suivant en code JavaScript :

<div>
  <h1 class="title">这是一个标题</h1>
  <p>这是一段文字</p>
</div>

Nous pouvons directement utiliser la chaîne du modèle pour l'insérer dans le code JavaScript correspondant, comme suit : #🎜🎜 #

const html = `
  <div>
    <h1 class="title">这是一个标题</h1>
    <p>这是一段文字</p>
  </div>`;

const js = `var div = document.createElement('div');
div.innerHTML = '${html}';
document.body.appendChild(div);`;

Dans le code ci-dessus, nous utilisons des backticks (`) pour définir la chaîne du modèle. Ensuite, nous pouvons utiliser ${} pour insérer des variables et découper le code JavaScript dont nous avons besoin.

En bref, HTML et JavaScript sont des technologies très importantes dans le développement Web. Maîtriser la méthode de conversion du HTML en code JavaScript peut nous aider à développer des applications plus facilement. Voici plusieurs méthodes pour convertir du code HTML en code JavaScript. Vous pouvez en choisir une ou plusieurs en fonction de votre situation réelle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!