html转成字符串_js转string类型

html转成字符串_js转string类型看到一个牛人的博客http://riny.net/lab/#tools_html2js看了下他的代码挺棒的所依赖的两个库在这里https://github.com/Bubblings/lab/t

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/166515.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • AD域filter

    AD域filterAD域BuildingLDAPFiltershttp://flylib.com/books/en/1.434.1.37/1/ldapextensiblefilterhttp://ldapwiki.willeke.com/wiki/ExtensibleMatchhttp://ldapwiki.willeke.com/wiki/Active%20Direct

  • 什么是反射机制?_java的反射是如何实现的

    什么是反射机制?_java的反射是如何实现的   Java反射学习步骤:1、 什么是反射机制?2、 获取字节码文件对象(class)3、 (Consrtuctor)用字节码对象(class)new一个对象4、 获取和设置字段(Field)对象的值5、获取指定class的函数(Method)并对其调用6、反射实例什么是反射机制?说全:Java反射机制是在运行状态中,对于任意一个类(Class文件),都能够知道这个类的属性和方法;  …

    2022年10月29日
  • eclispe中创建maven项目使用spring报java.lang.ClassNotFoundException: org.springframework.web.filter.Charact「建议收藏」

    eclispe中创建maven项目使用spring报java.lang.ClassNotFoundException: org.springframework.web.filter.Charact「建议收藏」报错如下:信息: Starting Servlet Engine: Apache Tomcat/7.0.57九月 24, 2018 6:44:04 下午 org.apache.catalina.util.SessionIdGenerator createSecureRandom信息: Creation of SecureRandom instance for session ID gen…

  • Android小项目——新闻APP

    Android小项目——新闻APP前言:在公司学习了一段时间Android知识,决定做一个小项目,目的是学会运用所学的基础知识,在这里记录一下开发历程,大家可以把它看成一款入门级练手的Demo应用吧~项目介绍:类型:新闻APP(低仿今日头条)基本功能:欢迎页面加载(3s,点击可跳过)——Activity相关用户注册/登录——SQLite运用横向滑动列表显示新闻类别——TabLayout…

  • python+appium自动化_python dict

    python+appium自动化_python dictPythonic⌘当前价格:30⌘支持系统:OSX10.13⌘开发者:⌘服务支持:官方页面安全下载累计下载次数:43Writecodeveryquicklyandreviewyourresultsinstantlybyusing”Pythonic”coderunner.PythonicgivesyouthepowerofPythonandmac…

    2022年10月23日
  • IDEA汉化官方插件

    IDEA汉化官方插件直接在IDEA内下载即可输入Chinese下载完成后重启IDEA

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号