[js高手之路]HTML标签解释成DOM节点
2017-08-30 20:32
351 查看
最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能,后面还会扩展大量的工具函数和MVVM双向驱动等功能。跟jquery的使用方法完全一样,jquery的选择器,几乎都能支持,为什么说这事,跟这篇文章的主题有毛关系呢?因为这篇文章要讲的就是我在写框架过程中碰到的一个问题,封装jquery的after方法,支持DOM和html标签两种用法,html标签传参,我要把html解释成DOM结构,用DOM的方法插入.
首先,我们写个通用的html标签:
<div onclick="test();" style="color:red;background:green;" 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就可以搞定了
解释思路已经明确,那么我们首先就要把html标签的每部分用正则表达式匹配出来
恩,这就是我们匹配出来的结果,从图中可以看出,
res[1]存储的是标签名称,只需要把两边的空格去掉
res[2]存储的是属性和值,我们用split函数按空格切割一次,再用split函数按'='切割一次,就能分解出来了
res[4]存储的就是字符串的内容
上面3部分,只要用循环和字符串稍加处理就可以得出目标结果了
那么完整的处理代码就是:
可以自行封装一个函数,我相信你应该轻易就能封装出来吧.
首先,我们写个通用的html标签:
<div onclick="test();" style="color:red;background:green;" 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();" style="color:red;background:green;" name="test" id="test">this is a test string</div>'; var res = str.match(re);
恩,这就是我们匹配出来的结果,从图中可以看出,
res[1]存储的是标签名称,只需要把两边的空格去掉
res[2]存储的是属性和值,我们用split函数按空格切割一次,再用split函数按'='切割一次,就能分解出来了
res[4]存储的就是字符串的内容
上面3部分,只要用循环和字符串稍加处理就可以得出目标结果了
那么完整的处理代码就是:
var re = /<(\w+\s*)(\w+[=][\'\"](.*)?[\'\"]\s*)*>(.*)?<\/\w+>/; var str = '<div onclick="test();" style="color:red;background:green;" 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节点的实现方法
- [js高手之路]HTML标签解释成DOM节点
- DOM操作HTML文档;js创建表格;清除空文本节点
- js -- dom -- js dom html节点的属性方法
- 为什么给html标签定义了id,就可以在js中(浏览器环境)直接通过id引用这个dom元素?
- JS 获取HTML标签内的子节点的方法
- HTML中的<table>标签及其子元素标签,JS中DOM对<table>的操作
- js中创建html标签、添加select下默认的option的value和text、删除select元素节点下所有的OPTION节点
- Js基础学习之 -- DOM兼容 根据标签、类名获取节点函数封装
- js-dom-动态创建html标签时,name属性的初始化问题
- angularJS 使HTML解释JS字符串中的标签。
- js中创建html标签、加入select下默认的option的value和text、删除select元素节点下全部的OPTION节点
- 在JS的脚本里,怎么把一个html字符串转成的DOM对象.从而能使用返回的DOM对象来访问某一个节点?
- vue.js 中的在v-for节点中嵌入 v-if 的解释
- 通过js把html标签转化为普通字符,再用java进行反转
- odoo 新手之路-html js 上传文件 到odoo
- [js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示
- 转一个js类型判断函数,支持返回dom 元素的类型,像HTMLBody
- Web前端-HF-HTML5Programming笔记-CH1&CH2 HTML5&JS&DOM
- js去掉html标签和去掉字符串文本的所有的空格