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


Posted in Javascript onAugust 31, 2017

最近在封装一个开源框架,已经写了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);

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

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

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节点的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 Javascript
基于JSON数据格式详解
Aug 31 #Javascript
浅谈js中的this问题
Aug 31 #Javascript
js实现图片放大展示效果
Aug 30 #Javascript
详解js几个绕不开的事件兼容写法
Aug 30 #Javascript
JavaScript实现滑动导航栏效果
Aug 30 #Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 #Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 #Javascript
You might like
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
ASP和PHP都是可以删除自身的
2007/04/09 PHP
PHP与SQL注入攻击[三]
2007/04/17 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
PHP加密解密实例分析
2015/12/25 PHP
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
浅谈Python基础—判断和循环
2019/03/22 Python
python字典key不能是可以是啥类型
2020/08/04 Python
python实现银行账户系统
2021/02/22 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
某公司C#程序员面试题笔试题
2014/05/26 面试题
大学生毕业鉴定
2014/01/31 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
毕业生应聘求职信
2014/07/10 职场文书
电工实训报告总结
2014/11/05 职场文书
2014年幼师工作总结
2014/11/22 职场文书
雨花台导游词
2015/02/06 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
Java版 单机五子棋
2022/05/04 Java/Android