Combiner des balises HTML avec des nœuds DOM

Cette fois, je vais vous apporter la combinaison de balise HTML et de nœud DOM Quelles sont les précautions pour combiner la balise HTML et le nœud DOM. , comme suit C'est un cas pratique, jetons-y un coup d'œil.

Récemment, j'ai encapsulé un framework open source, j'ai écrit 500 lignes, il possède déjà la plupart des fonctions courantes de jquery, il étendra également un grand nombre de fonctions d'outils et de fonctions de pilote bidirectionnel MVVM. La méthode d'utilisation est exactement la même que celle de jquery. Presque tous les sélecteurs jquery sont pris en charge. Pourquoi cela a-t-il quelque chose à voir avec le thème de cet article ? Parce que cet article va parler d'un problème que j'ai rencontré lors du processus d'écriture d'un framework. Il encapsule la méthode after de jquery et prend en charge deux utilisations des balises DOM et HTML. La balise html transmet les paramètres que je souhaite interpréter. dans une structure DOM. Utilisez la méthode d'insertion DOM.

Tout d’abord, nous écrivons une balise html commune :

ceci est une chaîne de test

Ce code HTML comprend des événements, des styles, des attributs et du contenu.

Nous utilisons ensuite des expressions régulières pour faire correspondre chaque partie de ce code HTML. Ce dont nous avons besoin est :

. 1. Nom du tag, car

est nécessaire lors de la création d'un nœud dom 2. Les attributs et le contenu doivent être séparés séparément

Afin de faciliter la création de dom, nous utilisons un json pour sauvegarder, comme cette balise, le résultat final que nous voulons traiter est :

{
id:"test
inner:"this is a test string
name:"test"
onclick:"test();"
style:"color:red;background:green;"
tag:"p"
}

Si vous disposez de cette structure, il vous suffit d'obtenir les clés et valeurs correspondantes et de l'assembler dans un DOM

var o = document.createElement( obj['tag'] );
  o.innerHTML = obj['inner'];
  delete obj['inner'];
  delete obj['tag'];
  for( var key in obj ){
   o.setAttribute( key, obj[key] );
  } 
  document.body.appendChild( o );

. L'idée d'explication est claire, il faut donc d'abord faire correspondre chaque partie de la balise html avec une expression régulière

var re = /(.*)?/;
  var str = '<p>this is a test string</p>';
  var res = str.match(re);

Eh bien, c'est le résultat de notre matching. Comme on peut le voir sur la photo,

res[1] stocke le nom de la balise, il vous suffit de supprimer les espaces des deux côtés

res[2] stocke les attributs et les valeurs. Nous utilisons la fonction split pour couper une fois par espaces, puis utilisons la fonction split pour couper une fois par '=' pour le décomposer

res[4] stocke le contenu de la chaîne

Pour les 3 parties ci-dessus, vous pouvez obtenir le résultat cible avec un peu de traitement à l'aide de boucles et de chaînes

Ensuite, le code de traitement complet est :

var re = /(.*)?/;
  var str = '<p>this is a test string</p>';
  var res = str.match(re);
  var tagName = null, attrList = [], arr = [], obj = {};
  if( res[1] ) {
   tagName = res[1].trim();
   obj['tag'] = tagName;
  }
  if( res[4] ) {
   obj['inner'] = res[4];
  }
  if ( res[2] ) {
   attrList = res[2].split( /\s+/ );
   for( var i = 0, len = attrList.length; i 

Vous pouvez encapsuler une fonction par vous-même. Je pense que vous pouvez facilement l'encapsuler 
 Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. le site PHP chinois ! 
Lecture recommandée : 

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!