[js高手之路]HTML标签解释成DOM节点的实现方法

 更新时间:2017年08月31日 08:31:32   作者:ghostwu  
下面小编就为大家带来一篇[js高手之路]HTML标签解释成DOM节点的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能,后面还会扩展大量的工具函数和MVVM双向驱动等功能。跟jquery的使用方法完全一样,jquery的选择器,几乎都能支持,为什么说这事,跟这篇文章的主题有毛关系呢?因为这篇文章要讲的就是我在写框架过程中碰到的一个问题,封装jquery的after方法,支持DOM和html标签两种用法,html标签传参,我要把html解释成DOM结构,用DOM的方法插入.

首先,我们写个通用的html标签:

<div onclick="test();" name="test" id="test">this is a test string</div>

这个html包括了事件,样式,属性,内容.

我们接着用正则把这个html的每一部分匹配出来,我们需要的是:

1、标签名, 因为创建dom节点的时候需要

2、属性和内容都要单独分离出来

为了便于创建dom,我们用一个json保存,比如这个标签,我们要处理成的最终结果是:

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

如果有了这个结构,只要拿到对应的键和值,组装成一个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 );

解释思路已经明确,那么我们首先就要把html标签的每部分用正则表达式匹配出来

var re = /<(\w+\s*)(\w+[=][\'\"](.*)?[\'\"]\s*)*>(.*)?<\/\w+>/;
  var str = '<div onclick="test();" name="test" id="test">this is a test string</div>';
  var res = str.match(re);

恩,这就是我们匹配出来的结果,从图中可以看出,

res[1]存储的是标签名称,只需要把两边的空格去掉

res[2]存储的是属性和值,我们用split函数按空格切割一次,再用split函数按'='切割一次,就能分解出来了

res[4]存储的就是字符串的内容

上面3部分,只要用循环和字符串稍加处理就可以得出目标结果了

那么完整的处理代码就是:

var re = /<(\w+\s*)(\w+[=][\'\"](.*)?[\'\"]\s*)*>(.*)?<\/\w+>/;
  var str = '<div onclick="test();" name="test" id="test">this is a test string</div>';
  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 < len; i++ ){
    arr = attrList[i].split("=");
    // console.log( arr );
    obj[arr[0]] = arr[1].replace( /(^[\'\"]+|[\'\"]$)/g, function(){
     return '';
    } );
   }
  }

  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 );

可以自行封装一个函数,我相信你应该轻易就能封装出来吧.

以上这篇[js高手之路]HTML标签解释成DOM节点的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JS轮播图的实现方法

    JS轮播图的实现方法

    这篇文章主要为大家详细介绍了JS轮播图的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 一个关于javascript匿名函数的问题分析

    一个关于javascript匿名函数的问题分析

    一个关于javascript匿名函数的问题分析,学习js的朋友可以参考下
    2012-03-03
  • js制作简易计算器

    js制作简易计算器

    这篇文章主要为大家详细介绍了js制作简易计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Javascript 不能释放内存.

    Javascript 不能释放内存.

    Javascript 不能释放内存....
    2006-09-09
  • Javascript中的匿名函数与封装介绍

    Javascript中的匿名函数与封装介绍

    这篇文章主要介绍了Javascript中的匿名函数与封装介绍,本文分析了jQuery 封装、Backbone 封装、Underscore 封装等内容,需要的朋友可以参考下
    2015-03-03
  • javascript简单实现等比例缩小图片的方法

    javascript简单实现等比例缩小图片的方法

    这篇文章主要介绍了javascript简单实现等比例缩小图片的方法,涉及javascript针对页面元素属性的读取、运算及设置相关技巧,需要的朋友可以参考下
    2016-07-07
  • 用nodejs访问ActiveX对象,以操作Access数据库为例。

    用nodejs访问ActiveX对象,以操作Access数据库为例。

    有人提问“如果用nodejs访问sql server?” 找了找资料,发现有两类解决方法,使用第三方nodejs插件
    2011-12-12
  • 利用pixi.js制作简单的跑酷小游戏

    利用pixi.js制作简单的跑酷小游戏

    PixiJS 提供一个适用于所有设备的快速轻量级 2D 库。PixiJS 具有完整的 WebGL 支持,并且可以无缝地回退到 HTML5 的画布。 本文将使用pixi.js制作简单的跑酷小游戏,感兴趣的可以尝试一下
    2022-07-07
  • 为你的微信小程序体积瘦身详解

    为你的微信小程序体积瘦身详解

    这篇文章主要给大家介绍了关于微信小程序瘦身的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • Bootstrap每天必学之基础排版

    Bootstrap每天必学之基础排版

    Bootstrap每天必学之基础排版,排版是学习的最基础环节,相当于地基,所以大家一定要认真对待,认真学习本文内容。
    2015-11-11

最新评论