html 转 js 字符串

看到一个牛人的博客  
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>
时间: 2024-11-29 08:24:24

html 转 js 字符串的相关文章

substr.js 字符串切割

substr.js 字符串切割 GitHub 以一个中文字的宽度为一个单位进行字符串切割 substr('南拳的妈妈1992', 4) // => 南拳的妈... substr('imlianer.com', 4) // => imlianer... substr('倒霉熊1992', 4) // => 倒霉熊19... substr('小红', 4) // => 小红 原文地址

jquery过滤特殊字符及js字符串转为数字

//替换特殊字符 $(this).val($(this).val().replace(/[~'!<>@#$%^&*()-+_=:]/g, "")); 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有对String类型调用这些方法,这两个函数才能正确运行:对其他类型返回的都是NaN(Not a Number). 一些示

0003.js字符串操作

通过 + 连接符拼接字符串: var str1 = "hello"; str1 = str1 + " javaScript"; document.write(str1); 或者: var str1 = "hello"; str1 += " javaScript"; document.write(str1); 输出:hello javaScript 要在字符串中添加换行符,需要使用转义字符"\n",但这种方法

js字符串函数

JS自带函数concat将两个或多个字符的文本组合起来,返回一个新的字符串.var a = "hello";var b = ",world";var c = a.concat(b);alert(c);//c = "hello,world"indexOf返回字符串中一个子串第一处出现的索引(从左到右搜索).如果没有匹配项,返回 -1 .var index1 = a.indexOf("l");//index1 = 2var ind

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

在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,因为他们都是字符串形式的.在网上找了一下js字符串转数字的文章,这个比较全 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有对String类型调用这些方法,这两个函数才

JS~字符串长度判断,超出进行自动截取(支持中文)

今天一个小弟问我的问题,在文本框中输入字符,如果超出指定长度,就把它截取,要求中文等于两个字符的长度,我找一下资料,把这个功能实现了,下面是JS代码: <html> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <body> <input type="text"

js字符串处理

函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组例子:str=”jpg|bmp|gif|ico|png”;arr=theString.split(”|”);//arr是一个包含字符值”jpg”.”bmp”.”gif”.”ico”和”png”的数组 函数:John() 功能:使用您选择的分隔符将一个数组合并为一个字符串例子:var delimitedString=myArray.join(delimiter);var myList=new Array(”jpg”,”bmp

浅谈 js 字符串 trim 方法之正则篇

position:static(静态定位) 当position属性定义为static时,可以将元素定义为静态位置,所谓静态位置就是各个元素在HTML文档流中应有的位置 podisition定位问题.所以当没有定义position属性时,并不说明该元素没有自己的位置,它会遵循默认显示为静态位置,在静态定位状态下无法通过坐标值(top,left,right,bottom)来改变它的位置. position:absolute(绝对定位) 当position属性定义为absolute时,元素会脱离文档流

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

js字符串长度计算(一个汉字==两个字符)和字符串截取 String.prototype.realLength = function() { return this.replace(/[^\x00-\xff]/g, "**").length; // [^\x00-\xff] - 匹配非双字节的字符 }; String.prototype.realSubstring = function(n){ var str = this||''; if(this.realLength()<=n

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

在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,因为他们都是字符串形式的.在网上找了一下js字符串转数字的文章,这个比较全 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有对String类型调用这些方法,这两个函数才