[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 相关文章推荐
js form action动态修改方法
Nov 04 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
js实现带积分弹球小游戏
Jul 21 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第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
JS input 数字验证代码
2009/07/30 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
详解vuex的简单使用
2018/03/12 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
python判断字符串是否包含子字符串的方法
2015/03/24 Python
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
python实现两个文件合并功能
2018/04/01 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
Python2与Python3的区别点整理
2019/12/12 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
护士自我鉴定范文
2013/10/06 职场文书
趣味活动策划方案
2014/02/08 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
写给老婆的保证书
2015/02/27 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
网吧温馨提示
2015/07/17 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技