javascript字符串代码在前端的美化、格式化展示处理

第一步：在百度网盘上下载两个js文件；

第二步：在自己的jsp或html头部引入该两个js文件：

<script type="text/javascript" src="beautify.js"></script>
<script type="text/javascript" src="beautify-html.js"></script>

<xmp class="beautify">你需要美化的javascript脚本</xmp>

第三步：在自己的js中定义方法如下：

var the = { beautify_in_progress: false };
//this dummy function alleviates Chrome large string corruption by probably shoveling the corruption bug to some other area
if (/chrome/.test(navigator.userAgent.toLowerCase())) {String.prototype.old_charAt = String.prototype.charAt;String.prototype.charAt = function (n) { return this.old_charAt(n); }
}
function unpacker_filter(source) {var trailing_comments = '';var comment = '';var found = false;do {found = false;if (/^\s*\/\*/.test(source)) {found = true;comment = source.substr(0, source.indexOf('*/') + 2);source = source.substr(comment.length).replace(/^\s+/, '');trailing_comments += comment + "\n";} else if (/^\s*\/\//.test(source)) {found = true;comment = source.match(/^\s*\/\/.*/)[0];source = source.substr(comment.length).replace(/^\s+/, '');trailing_comments += comment + "\n";}} while (found);return trailing_comments + source;
}
function beautify(elem) {if (the.beautify_in_progress) return;the.beautify_in_progress = true;// var source = $('#source').val();var source = $(elem).html();var indent_size = $('#tabsize').val();var indent_char = indent_size == 1 ? '\t' : ' ';var preserve_newlines = $('#preserve-newlines').attr('checked');var keep_array_indentation = $('#keep-array-indentation').attr('checked');var brace_style = $('#brace-style').val();if ($('#detect-packers').attr('checked')) {source = unpacker_filter(source);}var comment_mark = '<-' + '-';var opts = {indent_size: indent_size,indent_char: indent_char,preserve_newlines:preserve_newlines,brace_style: brace_style,keep_array_indentation:keep_array_indentation,space_after_anon_function:true};if (source && source[0] === '<' && source.substring(0, 4) !== comment_mark) {$(elem).html(style_html(source, opts));} else {var v = js_beautify(unpacker_filter(source), opts);$(elem).html(v);}the.beautify_in_progress = false;
}

$(function(){//js美化$('.beautify').each(function(){beautify(this);});
});

javascript字符串代码在前端的美化、格式化展示处理相关推荐

JavaScript防代码格式化原理
本文出自:JShaman,一个专业的JS代码混淆平台. 防代码格式化,又称防代码美化.selfDefending. 意思是:将一段代码,经混淆加密,输出的代码是被压缩到一行的,这一行代码不可使用格式化 ...
JavaScript 字符串格式化输出
JavaScript 字符串格式化输出 1.什么是格式上课的时候,老师让你写作文,老师说:段落开头要缩进两个字,每一行开头不能有句号--等.这是写作文的时候,我们需要遵循的格式. 在格式化输 ...
JavaScript 字符串格式化format、去左ltrim、去rtrim实现
ES6可以用字符串模板功能直接实现字符串format功能,因此本文更多的是基于ES3.ES5,当然ES6也适用.本文讨论实际项目中经常会使用的3个字符串函数实现. 1.格式化字符串, format(s ...
javascript常用代码【格式化时间日期】
这周工作中,写了几个前端界面,页面中有个表格列字段是时间类型的,但是后端传递过来的时间是时间戳,所以需要在前端将其转换展示. 记录一下格式化日期代码,以后再遇见类似功能直接复制黏贴即可(其实是为了多点 ...
springboot接口接收前端字符串类型日期及接口返回格式化日期
接口接收字符串日期接口接收参数是日期(Date)类型,但是前端传递的是字符串日期(2019-11-11): 这时调用接口会报错: XXX Failed to convert property val ...
js 包含某个字符串_[译] 5 大 JavaScript 字符串操作库
原文地址:5 String Manipulation Libraries for JavaScript 原文作者:Mahdhi Rezvi 译文出自:掘金翻译计划本文永久链接:https://git ...
25个有用的 JavaScript 单行代码
英文 | https://medium.com/@daaaan 翻译整理 | web前端开发(ID:web_qdkf) JavaScript 有很多单行代码的实用例子,它们可以做很多强大的事情,无论你 ...
前端实现json数据格式化展示
1. 故事前景: 后端返回给前端一串json字符串,前端需要做格式化处理并将其美观地展示给用户. 2. 效果演示: 3. 实现代码: <!DOCTYPE html> <html la ...
读书笔记：编写高质量代码--web前端开发修炼之道（二：5章）
读书笔记:编写高质量代码--web前端开发修炼之道这本书看得断断续续,不连贯,笔记也是有些马虎了,想了解这本书内容的童鞋可以借鉴我的这篇笔记,希望对大家有帮助. 笔记有点长,所以分为一,二两个部分: ...

javascript字符串代码在前端的美化、格式化展示处理

javascript字符串代码在前端的美化、格式化展示处理相关推荐

最新文章

热门文章