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)


相关推荐

  • 1200多套微信小程序源码-史上最全的不同行业的源码集合[通俗易懂]

    1200多套微信小程序源码-史上最全的不同行业的源码集合[通俗易懂]史上最全小游戏分类,需要的自行下载:下载链接在最后面!o2o行业| -盒马鲜生| -轻客洗衣互联网行业| -云文档| -仿ofo共享单车| -仿美团外卖| -仿饿了么| -灵犀外卖交友互动| -小契约(交友互动小程序)| -信息科技公司展示小程序| -华云智慧园区| -房地产公司展示企业应用| -企业OA系统小程序优惠券卡卷| -…

  • oracle函数的创建

    oracle函数的创建函数和存储过程有一定的相似之处,函数用于返回特定的数据,当建立函数时,在函数头部就会包含return字句,而在函数体内必须包含return语句返回的数据,可以使用createfunction来创建函数。案例1输入雇员的姓名,返回雇员的年薪。创建函数:createorreplacefunctionc_hs1(srnamevarchar2)returnnumber …

  • vue v-if 多条件_vue if show

    vue v-if 多条件_vue if showv-if在模板中,可以根据条件进行渲染。条件用到的是v-if、v-else-if以及v-else来组合实现的。示例代码如下:<divid="app"><p

  • linux时间戳转换日期格式_java时间戳转换成年月日时分秒

    linux时间戳转换日期格式_java时间戳转换成年月日时分秒unix时间戳 date +%s linux: 将时间戳1123495443 换算成可以识别的年月日分秒 date -d ‘1970-01-01 UTC 1123495443 seconds’ FreeBSD: date -j -f “%Y%m%d ” `date +%Y%m%d` “+ %s” #date指令 源日期格式  要转换出的格式管理员在

  • windows显示Linux对话框程序,在cmd命令行中弹出Windows对话框(使用mshta.exe命令)…

    windows显示Linux对话框程序,在cmd命令行中弹出Windows对话框(使用mshta.exe命令)…有时候用bat写一些小脚本最后会弹出对话框提示操作成功,可以用mshta.exe来实现,它是Windows系统的相关程序,用来执行.HTA文件,一般计算机上面都有这个程序,实现如下:mshtavbscript:msgbox(“我是提示内容”,64,”我是提示标题”)(window.close)弹出对话框如下图:如果没有mshta这个程序的话,那么就临时产生一个vbs脚本来实现,完了再删除这个脚本…

  • c3p0数据库连接池配置总结[通俗易懂]

    c3p0数据库连接池配置总结[通俗易懂]c3p0方法配置c3p0配置文件配置前言关于c3p0一般有这么两种配置,一种是通过set方法进行配置,另一种是通过在同src目录下的c3p0-conflg.xml文件或者c3p0.properties文件进行相关的配置。c3p0通过set方法进行配置privatestaticComboPooledDataSourcedataSou…

发表回复

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

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