[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 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
webpack4打包vue前端多页面项目
Sep 17 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 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初学者们头痛的十四个问题
2007/01/15 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
javascript与CSS复习(二)
2010/06/29 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
python中的闭包用法实例详解
2015/05/05 Python
python中Lambda表达式详解
2019/11/20 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
用python绘制樱花树
2020/10/09 Python
《回乡偶书》教学反思
2014/04/12 职场文书
群众路线领导对照材料
2014/08/23 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
九不准学习心得体会
2016/01/23 职场文书
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers
Python first-order-model实现让照片动起来
2022/06/25 Python