[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 新手24条实用建议[TUTS+]
Jun 21 Javascript
js 动态选中下拉框
Nov 26 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 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清除bom示例
2014/03/03 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
Js中sort()方法的用法
2006/11/04 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
python中的一些类型转换函数小结
2013/02/10 Python
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
python中函数默认值使用注意点详解
2016/06/01 Python
python删除过期log文件操作实例解析
2018/01/31 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
python队列queue模块详解
2018/04/27 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
工会主席岗位责任制
2014/02/11 职场文书
无犯罪记录证明
2014/09/19 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫