看到一个牛人的博客  
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. AngularJs 实例

    1.AngularJs 表单验证: 示例 .controller('signupController', ['$scope', function($scope) { $scope.submitted ...

  2. 已知某一天是周几 求给定的一天是周几的算法 C++实现

    #include<iostream> using namespace std; struct Date{ int year,month,day; }; enum Week{ MON=, T ...

  3. 使用WinSetupFromUSB来U盘安装windowsXP（不使用win PE系统）

    目前用U盘安装XP的多数方法都要借助WINPE,比较麻烦.使用WinSetupFromUSB只需要下载一个6.5MB的绿色软件就可以制作好windows xp的安装U盘,方便简捷. WinSetupF ...

  4. 以程序的方式操纵NTFS的文件权限

    Windows NT/2K/XP版本的操作系统都支持NTFS格式的文件系统,这是一个有安全性质的文件系统,你可以通过Windows的资源管理器来设置对每个目录和 文件的用户访问权限.这里我就不对NTF ...

  5. ora-01031:insufficient privileges 解决方案

    sqlplus /as sysdba 连补上,ora-01031的解决方法: (1)检查sqlnet.ora是否包含这句话:SQLNET.AUTHENTICATION_SERVICES=(NTS),没 ...

  6. nova的wsgi介绍【WIP】

    有关openstack的所有的帖子. https://www.ustack.com/blog/openstack_hacker/#Nova_Workflow 网上已经很多的分析文章了: http:// ...

  7. PostgreSQL的存储系统二：REDOLOG文件存储结构二

    REDOLOG文件里的用户数据和数据文件里的用户数据存储结构相同 几个月前同事给台湾一家公司培训<pg9 ad admin>时,有个学员提及WAL里记录的内容为Query时的SQL语句(比 ...

  8. 顺序栈之C++实现

    顺序栈就是用顺序表(数组)实现的栈.其组织形式如下图所示: 下面介绍下我用C++实现的顺序栈,在VC6下调试通过.不足之处还请指正. 1.文件组织 2.ss.h栈类的声明及宏的定义 #ifndef _ ...

  9. Hotel(线段树合并)

    Hotel Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 14958   Accepted: 6450 Descriptio ...

  10. 怎么限制Google自己主动调整字体大小

    Google默认的字体大小是12px,当样式表中font-size<12px时,或者没有明白指定字体大小,则在chrome浏览器里字体显示是12px. 近期在写代码玩的时候,我也碰到了 在FF和 ...