[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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
编写兼容IE和FireFox的脚本
May 18 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
php设计模式之单例模式代码
2016/06/11 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
JQuery datepicker 使用方法
2011/05/20 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
javascript的push使用指南
2014/12/05 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
js实现导航跟随效果
2018/11/17 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
Python实现获取网站PR及百度权重
2015/01/21 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
python使用udp实现聊天器功能
2018/12/10 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
工作自我评价分享
2013/12/01 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python