Home >Web Front-end >JS Tutorial >JS code formatting and syntax coloring V2_javascript tips

JS code formatting and syntax coloring V2_javascript tips

WBOYOriginal: 2016-05-16 19:25:161273browse

Upgraded to the second version, open a post to celebrate, hahaha

Upgrade content from Ver1.1
1. Add function list
2. Add function Export function
3. Add Function dependency analysis (I have never seen this function implemented by other software. I am creative and have many problems. At present, the analysis ability is still relatively limited. I can only analyze global function dependencies. Bugs may occur in complex code)
4. Fix the for statement analysis bug
5. Fix the syntax folding bug
6. Improve the working method of Collapse All ※ Expand All function to avoid crash when the number of rows is too large
7. Improve the line number analysis mechanism , to avoid crashes when the number of lines is too large

Copy code The code is as follows:

JSer Ver 2.0

Input JS
Collapse All
Expand All
Export JS

Please Input the JS:

<br>/**********************
 Author: Hutia
 
*********************/

<br>window.onload=init;

//------------------
// Static Variable
//----- <br>------------- <br>

var KEYWORDS="abstract break byte case catch char class cons <br>t continue default delete do double else extends false final finally f <br>loat for function goto if implements import in instanceof int interface&nbs <br>p;long native null package private protected public reset return short stat <br>ic super switch synchronized this throw transient true try var void wh <br>ile with";
var OBJECTS="Anchor Applet Area Arguments Array Boolean  <br>;Button Checkbox Collection Crypto Date Dictionary Document Drive Drives Element <br> Enumerator Event File FileObject FileSystemObject FileUpload Folder Folders For <br>m Frame Function Global Hidden History HTMLElement Image Infinity Input Jav <br>aArray JavaClass JavaObject JavaPackage JSObject Layer Link Math MimeType Naviga <br>tor Number Object Option Packages Password Plugin PrivilegeManager Random RegExp <br> Screen Select String Submit Text Textarea URL VBArray Window WScript" <br>;
var METHODS_PROPERTIES="above abs acos action activeElement alert alinkCol <br>or all altKey anchor anchors appCodeName applets apply appName appVersion a <br>rguments arity asin assign atan atan2 atob  availHeight availLeft availTop& <br>nbsp;availWidth ActiveXObject back background below bgColor big blink blur bold& <br>nbsp;border borderWidths bottom btoa button call callee caller cancelBubble capt <br>ureEvents ceil charAt charCodeAt charset checked children classes className clea <br>r clearInterval clearTimeout click clientInformation  clientX clientY close clos <br>ed colorDepth compile complete concat confirm constructir contains contextual co <br>okie cos crypto ctrlKey current data defaultCharset defaultChecked defaultSelected&nb <br>sp;defaultStatus defaultValue description disableExternalCapture disablePrivilege document doma <br>in E Echo  element elements embeds enabledPlugin enableExternalCapture enablePri <br>vilege encoding escape eval event exec exp expando FromPoint fgColor fileNa <br>me find fixed floor focus fontColor fontSize form forms forward frames  <br>;fromCharCode fromElement  getAttribute get getClass getDate getDay getFullYear  <br>getHours getMember getMilliseconds getMinutes getMonth getSeconds getSelection getSlot&nbs <br>p;getTime getTimezoneOffset  getUTCDate getUTCDay getUTCFullYear getUTCHours getUTCMillise <br>conds getUTCMinutes getUTCMonth getUTCSeconds getWindow getYear global go HandleEvent <br> Height  hash hidden history home host hostName href hspace id id <br>s ignoreCase images index indexOf inner innerHTML innerText innerWidth insertAdj <br>acentHTML insertAdjacentText isFinite isNAN italics java javaEnabled join keyCode&nbs <br>p;Links LN10 LN2 LOG10E LOG2E  lang language lastIndex lastIndexOf lastMatc <br>h lastModified lastParen layers layerX layerY left leftContext length link  <br>linkColor load location locationBar log lowsrc MAX_VALUE MIN_VALUE  margins  <br>;match max menubar method mimeTypes min modifiers moveAbove moveBelow moveBy&nbs <br>p;moveTo moveToAbsolute multiline NaN NEGATIVE_INFINITY  name navigate navigator  <br>;netscape next number offscreenBuffering offset offsetHeight offsetLeft offsetParent  <br>offsetTop offsetWidth offsetX offsetY onabort onblur onchange onclick ondblclick  <br>;ondragdrop onerror onfocus  onHelp onkeydown onkeypress onkeyup onload onmoused <br>own onmousemove onmouseout onmouseover onmouseup onmove onreset onresize onsubmit&nbs <br>p;onunload open opener options outerHeight  outerHTML outerText outerWidth POSIT <br>IVE_INFINITY PI  paddings pageX pageXOffset pageY pageYOffset parent parentEleme <br>nt parentLayer parentWindow parse parseFloat parseInt pathname personalbar pixelDepth <br> platform plugins pop  port pow preference previous print prompt proto <br>col prototype push random readyState reason referrer refresh releaseEvents reloa <br>d removeAttribute removeMember replace resizeBy resizeTo returnValue reverse right&nb <br>sp;rightcontext round SQRT1_2 SQRT2  screenX screenY scroll scrollbars scrollBy& <br>nbsp;scrollIntoView scrollTo search select selected selectedIndex self setAttribute s <br>etDay setFullYear setHotkeys setHours setInterval  setMember setMilliseconds setMinut <br>es setMonth setResizable setSeconds setSlot setTime setTimeout setUTCDate setUTCFullY <br>ear setUTCHours setUTCMillseconds setUTCMinutes  setUTCMonth setUTCSeconds setYear se <br>tZOptions shift shiftKey siblingAbove siblingBelow signText sin slice smallsort  <br>source sourceIndex splice split sqrt src  srcElement srcFilter status statu <br>sbar stop strike style sub submit substr substring suffixes sun sup sy <br>stemLanguage TYPE  tagName tags taint taintEnabled tan target test text&nbs <br>p;title toElement toGMTString toLocaleString toLowerCase toolbar top toString toUpper <br>Case toUTCString type typeOf UTC unescape unshift untaint unwatch userAgent  <br>;userLanguage  value valueOf visibility vlinkColor vspace watch which width  <br>;window write writeln x y zIndex";
var OPS="! $ % <br> & * + - // / : < = > ? [ ] <br> ^ | ~ is  new sizeof  typeof unchecked";

var  <br>regKW=new RegExp("(\\W"+KEYWORDS.replace(/ /g,"$)|(\\W")+"$) <br>","g");
var regObj=new RegExp("(\\W"+OBJECTS.replace(/ /g,"$)| <br>(\\W")+"$)","g");
var regMP=new RegExp(" <br>(\\W"+METHODS_PROPERTIES.replace(/ /g,"$)|(\\W")+"$) <br>","g");
//var regOP=new RegExp("(\\W"+OPS.replace(/ /g,"$)|(\\W") <br>+"$)","g");

//------------------
// Global Variables
//-- <br>---------------- <br>
var divJSInput, txtJSInput, divMain, divJSOutputLineNo, divJSOutputPlus, divJSOutput, <br> divWaiting;
var spnProcess, cmdStop, divJSExport, selJSExport, divJSExportContent; <br>3;
var glbStr, glbP, glbRe, curRe, glbTimer, glbBusy, glbFuntionNames;

& <br>#10;
function init() <br>{
 // init global variables
 divJSInput=document.getElementById <br>("divJSInput");
 txtJSInput=document.getElementById <br>("txtJSInput");
 divMain=document.getElementById <br>("divMain");
 divJSOutputLineNo=document.getElementById <br>("divJSOutputLineNo");
 divJSOutputPlus=document.getElementById <br>("divJSOutputPlus");
 divJSOutput=document.getElementById <br>("divJSOutput");
 divWaiting=document.getElementById <br>("divWaiting");
 spnProcess=document.getElementById <br>("spnProcess");
 cmdStop=document.getElementById <br>("cmdStop");
 divJSExport=document.getElementById <br>("divJSExport");
 selJSExport=document.getElementById <br>("selJSExport");
 divJSExportContent=document.getElementById <br>("divJSExportContent");
 
 // init window state
 maximizeW <br>indow();
 
 divMain.style.width=document.body.clientWidth- <br>4;
 divMain.style.height=document.body.clientHeight- <br>26;
 
 divJSOutput.style.width=document.body.clientWidth- <br>52;
 
 
 // init global events
 divJSOutputLineNo.onse <br>lectstart=divJSOutputLineNo.onselect=divJSOutputPlus.onselectstart=divJSOutputPlus.onselect=cancelEvents;
 divJ <br>SOutput.onscroll=divJSOutput_onscroll;
 
 divJSInput.onkeydown=divJSInput_keydown;
  <br>;divJSExport.onkeydown=divJSExport_keydown;
 
}

//------------------ <br>
// event scripts
//------------------

function cancelEvents(e) <br>{
 var e=window.event?window.event:e;
 e.returnValue=false;
 return <br>(false);
}

function divJSInput_keydown(e){
 var e=window.event? <br>window.event:e;
 var srcEle=e.srcElement? <br>e.srcElement:e.target;
 var sel;
 if(e.keyCode==27)hideJSInput();
 if <br>(e.keyCode==13&&e.ctrlKey)execJSInput();
 if(e.keyCode==9&&srcEle==txtJSInput) <br>{
  document.selection.createRange().text="t";return <br>(false); // not support FF 
 }
} <br>

function divJSExport_keydown(e){
 var e=window.event? <br>window.event:e;
 var srcEle=e.srcElement? <br>e.srcElement:e.target;
 var sel;
 if(e.keyCode==27)hideJSExport();
 if <br>(e.keyCode==13&&e.ctrlKey)hideJSExport();
}

function divJSOutput_onscroll() <br>{
 divJSOutputLineNo.scrollTop=divJSOutputPlus.scrollTop=divJSOutput.scrollTop;
} <br>

//------------------
// functional scripts
//----------- <br>-------

function showJSInput(){
 if(glbBusy)return;
 hideJSExport <br>();
 with(divJSInput.style){
  display="block";
  left= <br>(document.body.clientWidth-divJSInput.offsetWidth)/2;
  top=(document.body.clientHeight- <br>divJSInput.offsetHeight)/2;
 }
 
 txtJSInput.focus <br>();
 
 return(false);
}

function showJSExport() <br>{
 if(glbBusy)return;
 hideJSInput();
 with(divJSExport.style) <br>{
  display="block";
  left=(document.body.clientWidth- <br>divJSExport.offsetWidth)/2;
  top=(document.body.clientHeight</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Using JavaScript scripts to realize information interaction on Web pages_javascript skills" href="https://m.php.cn/faq/27008.html">Using JavaScript scripts to realize information interaction on Web pages_javascript skills</a></span><span>Next article：<a class="dBlack" title="Using JavaScript scripts to realize information interaction on Web pages_javascript skills" href="https://m.php.cn/faq/27010.html">Using JavaScript scripts to realize information interaction on Web pages_javascript skills</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-6t+ed+2i-1n-4w"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="8966999616"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="5027754603"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p>                © php.cn All rights reserved
            </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了，就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --

_self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}
$("table.syntaxhighlighter").wait(function() {
    $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
      $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>