[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 相关文章推荐
jQuery 入门讲解1
Apr 15 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
解决vant的Toast组件时提示not defined的问题
Nov 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下MAIL的另一解决方案
2006/10/09 PHP
PHP _construct()函数讲解
2019/02/03 PHP
判断脚本加载是否完成的方法
2009/05/26 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
Python入门之modf()方法的使用
2015/05/15 Python
python 全文检索引擎详解
2017/04/25 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
美国批发零售网站:GearXS
2016/07/26 全球购物
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
服务之星事迹材料
2014/05/03 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
培训后的感想
2015/08/07 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android