看到一个牛人的博客  
http://riny.net/lab/#tools_html2js

看了下他的代码  挺棒的

所依赖的两个库在这里 https://github.com/Bubblings/lab/tree/master/tools/js

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <style type="text/css">
body {
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;
}
</style> <div class="html2js">
<h2>html代码转javascript</h2>
<p>需要转换的html代码</p>
<textarea name="" id="html"></textarea>
<p>
<button class="btn btn-primary" id="single-btn">转单引号格式</button>
<button class="btn btn-primary" id="double-btn">转双引号格式</button>
<input type="checkbox" name="" id="is-array" checked><label for="is-array">数组拼接</label>
<select name="indent" id="indent">
<option value="1">制表符缩进</option>
<option value="2">2个空格缩进</option>
<option value="4" selected>4个空格缩进</option>
</select>
</p>
<p>生成的javascript代码</p>
<textarea name="" id="javascript"></textarea>
</div> <script src="htmlFormat.js"></script>
<script src="jsFormat.js"></script>
<script>
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);
}
</script>
</body>
</html>

html 转 js 字符串的更多相关文章

  1. JS字符串替换函数:Replace(“字符串1″, “字符串2″),

    JS字符串替换函数:Replace(“字符串1″, “字符串2″), 1.我们都知道JS中字符串替换函数是Replace(“字符串1″, “字符串2″),但是这个函数只能将第一次出现的字符串1替换掉, ...

  2. js 字符串转换成数字的三种方法

    在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,因为他们都是字符串形 ...

  3. 探讨js字符串数组拼接的性能问题

    这篇文章主要介绍了有关js对字符串数组进行拼接的性能问题,字符串连接一直是js中性能最低的操作之一,应该如何解决呢?请参看本文的介绍 我们知道,在js中,字符串连接是性能最低的操作之一. 例如: 复制 ...

  4. 随笔 JS 字符串 分割成字符串数组 并动态添加到指定ID的DOM 里

    JS /* * 字符串 分割成字符串数组 并动态添加到指定ID的DOM 里 * @id 要插入到DOM元素的ID * * 输入值为图片URL 字符串 * */ function addImages(i ...

  5. js 字符串分割成字符串数组 遍历数组插入指定DOM里 原生JS效果

    使用的TP3.2 JS字符串分割成字符串数组 var images='{$content.pictureurl} ' ;结构是这样 attachment/picture/uploadify/20141 ...

  6. js动态获取当前系统时间+js字符串转换为date日期对象

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. 从js的repeat方法谈js字符串与数组的扩展方法

    js将字符串重复N次的repeat方法的8个版本 /* *@desc: 将一个字符串重复自身N次 */ //版本1:利用空数组的join方法 function repeat(target, n) { ...

  8. js字符串长度计算(一个汉字==两个字符)和字符串截取

    js字符串长度计算(一个汉字==两个字符)和字符串截取 String.prototype.realLength = function() { return this.replace(/[^\x00-\ ...

  9. js字符串 数字 的转换

    js 字符串转化成数字 的 三种方法主要有 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数 ...

随机推荐

  1. Asp.Net之三层架构

    三层架构之理论: 通常意义上讲的三层架构就是将整个项目应用划分为:表现层(UI),业务逻辑层(BLL),数据访问层(DAL).与传统的二层架构的区别在于在用户界面(UI)和数据库服务器之间,添加中间层 ...

  2. 浅谈JavaScript中的内存管理

    一门语言的内存存储方式是我们学习他必须要了解的,接下来让我浅谈一下自己对他的认识. 首先说,JavaScript中的变量包含两种两种类型: 1)值类型或基本类型:undefined.null.numb ...

  3. c++中的const参数,const变量,const指针,const对象,以及const成员函数

    const 是constant 的缩写,“恒定不变”的意思.被const 修饰的东西都受到强制保护,可以预防意外的变动,能提高程序的健壮性.所以很多C++程序设计书籍建议:“Use const whe ...

  4. 记一次C++与lua连接

    今晚,花了两个多钟折腾lua和c++的互连,终于成功了,觉得有必要记录下来.说实话,搜索引擎真是有利有弊,利在你有地方搜答案,弊则在于你半天都找不到正确的答案甚至找到误导你的答案,今晚更加加深了我的体 ...

  5. 回归 WordPress

    一直很喜欢用WordPress,使用方便,模板容易定制,国内建站可选择的虚拟主机多.自从WordPress升级后,官方网站打不开,从 GitHub 安装 WordPress 后无法浏览在线的主题.一切 ...

  6. J2SE知识点摘记-数据库(一)

    一.          数据库连接 在JDBC的操作过程中,进行数据库连接的主要步骤如下: 通过Class.forName()加载数据库的驱动程序.首先需要利用来自Class类中的静态方法forNam ...

  7. iOS6和iOS7代码的适配(4)——tableView

    iOS7上不少控件的样子有了变化(毕竟要扁平化嘛),不过感觉变化最大的肯定非tableView莫属.因为这个控件的高度可定制性,原先是使用及其广泛的,这样的一个改变自然也影响颇大. 1.accesso ...

  8. 使用iscroll插件实现下拉刷新功能

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. Largest Rectangle in a Histogram(最大矩形面积,动态规划思想)

    Largest Rectangle in a Histogram Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  10. linux重新编译内核

    一.linux内核 1.查看linux内核版本 uname -r 2.下载对应的linux内核 https://www.kernel.org/pub/linux/kernel/ 将内核文件夹解压到/u ...