看到一个牛人的博客
http://riny.net/lab/#tools_html2js
看了下他的代码 挺棒的
所依赖的两个库在这里 https://github.com/Bubblings/lab/tree/master/tools/js
Documentbody {
background-color: #fafafa;
}
.html2js {
width: 800px;
margin: 5px auto 0;
}
#html, #javascript {
width: 790px;
height: 190px;
padding: 5px;
border: 1px solid #ccc;
box-shadow: 2px 2px 5px rgba(0,0,0,.1);
}
h2 {
text-align: center;
}
p {
margin: 10px 0;
line-height: 20px;
}
button {
margin-right: 5px;
}
#is-array {
margin: 0 3px 0 5px;
width: 13px;
height: 13px;
}
label {
display: inline-block;
}
select {
width: auto;
font-size: 14px;
}
html代码转javascript
需要转换的html代码
转单引号格式
转双引号格式
数组拼接
制表符缩进
2个空格缩进
4个空格缩进
生成的javascript代码
function html2js(html, quotes, isArray) {
var arr = html.split('\n');
var reg = new RegExp(quotes, 'g');
for (var i = arr.length - 1; i >= 0; i--) {
var cur = arr[i].replace(reg, '\\' + quotes); //假如我要转为的js字符串是单引号包裹的 那么html属性中的单引号需要转义
var startSpace = cur.match(/^\s*/g); //取到一行开头的空格(缩进)
cur = cur.replace(/^\s*|\s*$/, ''); //去掉开头和结尾的空格
if (cur === '') {
arr.splice(i, 1); //如果是空行 则丢弃 注意splice是在原有数组上操作的
continue;
}
cur = startSpace + quotes + cur + quotes;
arr[i] = cur;
}
if (isArray) {
return '[\n' + arr.join(',\n') + '\n].join('+ quotes + quotes +');'
} else {
return arr.join(' +\n') + ';';
}
}
var htmlEle = document.getElementById('html');
var jsEle = document.getElementById('javascript');
var singleBtn = document.getElementById('single-btn');
var doubleBtn = document.getElementById('double-btn');
var checkbox = document.getElementById('is-array');
singleBtn.onclick = function () {
transform('\'');
};
doubleBtn.onclick = function () {
transform('\"');
}
/*
转换原理
先将html片段格式化
再将每一行的开头加上引号 (html中本身的引号要转义)
*/
function transform(quotes) {
var input = htmlEle.value;//.replace(/^\s*/, '');//去除开头的空格 //注意这里的input只有一行
var indentSize = document.getElementById('indent').value;
var indentChar = ' ';
if (indentSize == 1) {
indentChar = '\t';
}
input = style_html(input, indentSize, indentChar, 800); //格式化后的input //仍只有一行
jsEle.value = html2js(input, quotes, checkbox.checked);
}
JS字符串替换函数:Replace(“字符串1″, “字符串2″),
JS字符串替换函数:Replace(“字符串1″, “字符串2″), 1.我们都知道JS中字符串替换函数是Replace(“字符串1″, “字符串2″),但是这个函数只能将第一次出现的字符串1替换掉, ...
js 字符串转换成数字的三种方法
在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,因为他们都是字符串形 ...
探讨js字符串数组拼接的性能问题
这篇文章主要介绍了有关js对字符串数组进行拼接的性能问题,字符串连接一直是js中性能最低的操作之一,应该如何解决呢?请参看本文的介绍 我们知道,在js中,字符串连接是性能最低的操作之一. 例如: 复制 ...
随笔 JS 字符串 分割成字符串数组 并动态添加到指定ID的DOM 里
JS /* * 字符串 分割成字符串数组 并动态添加到指定ID的DOM 里 * @id 要插入到DOM元素的ID * * 输入值为图片URL 字符串 * */ function addImages(i ...
js 字符串分割成字符串数组 遍历数组插入指定DOM里 原生JS效果
使用的TP3.2 JS字符串分割成字符串数组 var images='{$content.pictureurl} ' ;结构是这样 attachment/picture/uploadify/20141 ...
js动态获取当前系统时间+js字符串转换为date日期对象
//W3C//DTD XHTML 1.0 Transitional//EN& ...
lsof命令总结
1.lsof 简介 lsof 是 linux 下的一个非常实用的系统级的监控.诊断工具.它的意思是 List Open Files,很容易你就记住了它是 “ls + of”的组合~它可以用来列出被各种 ...
Objective-C 字典、可变字典
字典相当于c++ stl中的map 字典NSDictionary #import #import "AppDelegate.h" int ...
jquery $(function) 区别
document.ready和onload的区别——JavaScript文档加载完成事件 页面加载完成有两种事件 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件) 二是onloa ...
vue初尝试--组件
github代码同步网址 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添 ...