집 >웹 프론트엔드 >JS 튜토리얼 >JS 코드 형식 지정 및 구문 색상 지정 V2_javascript 팁

JS 코드 형식 지정 및 구문 색상 지정 V2_javascript 팁

WBOY원래의: 2016-05-16 19:25:161271검색

2차 버전으로 업그레이드 된 기념으로 포스팅을 열어봅니다 ㅎㅎ

Ver1.1에서 컨텐츠 업그레이드
1. 기능 목록 추가
2. 기능 추가
3. 분석 (다른 소프트웨어에서 이 기능을 구현한 것을 본 적이 없습니다. 저는 창의적이고 문제가 많습니다. 현재 분석 능력은 상대적으로 제한적입니다. 전역 함수 종속성만 분석할 수 있습니다. 복잡한 코드에서는 버그가 발생할 수 있습니다.)
4. for 문 분석 버그 수정
5. 구문 접기 버그 수정
6. 모두 축소 작업 방식 개선 ※ 행 개수가 너무 많을 때 충돌 방지를 위한 모두 확장 기능
7. 줄 번호 분석 메커니즘을 개선하여 줄 수가 너무 많을 때 충돌을 방지합니다

코드 복사 코드는 다음과 같습니다.

<머리>
JSer 버전 2.0

<스타일>
/* 전역 CSS */

* { padding:0px; 여백:0px; 글꼴 크기:13px; 글꼴 모음: Arial 宋体; }

본문 { overflow:auto; 테두리:0px 없음 검은색; 배경색:버튼면; }

li { 여백:0px 0px 0px 40px; 패딩:2px 4px; }

div { 글꼴 크기:13px; 줄 높이:14px; }

p { 글꼴 크기:13px; 줄 높이:14px; }

/* 클래스 CSS */

.codeRoot { line-height:14px; }
.quote { color:#999; }
.comments { color: #009090; }
.indent { margin-left:25px; }
.regexp { color:#F000F0; }
.keyWord { color:blue; }
.object { color:red; }
.method_property { color:#FF8000; }
.operator { color:#004000; }

.colsp { 글꼴 크기:12px; 너비:14px; 높이:14px; 오버플로:숨김; 테두리:1px 아웃셋 버튼페이스; 텍스트 정렬:가운데;
커서:포인터; 왼쪽 패딩:2px; }
.colsp2 { 글꼴 크기:12px; 너비:14px; 높이:14px; 오버플로:숨김; 테두리:1px 삽입 버튼페이스; 텍스트 정렬:가운데;
커서:포인터; 왼쪽 패딩:2px; 색상:빨간색!중요; 배경색:#E0FFF8!중요; }

/* 식별된 CSS */

#divTools { height:20px; border-bottom:1px solid #555; 왼쪽 패딩:15px; }

#divTools a { color:navy; 텍스트 장식:없음; 높이:20px; 줄 높이:20px; 패딩:0px 25px; }

#divTools a:hover { color:white; 배경색:네이비; 텍스트 장식:없음; 높이:20px; 줄 높이:20px; }

#divJSInput { display:none; 너비:600px; 높이:450px; 테두리:2px 시작 버튼페이스; 위치:절대; 배경-
color:buttonface; z-색인:2; }

#divJSInputTitle { color:white; 배경색:네이비; 높이:20px; 줄 높이:20px; 패딩:0px 10px; 커서:기본값; }

#txtJSInput { 너비:598px; 높이:406px; 오버플로:자동; 패딩:4px 8px; 배경색:흰색;}

#divJSInputBar { 높이:24px; 패딩:0px 4px; }

#divJSInputBar 입력 { 너비:110px; 높이:22px; 테두리:1px 솔리드 #555; 줄 높이:20px; }

#divMain { 너비:100%; 높이:500; 오버플로:숨김; 위치:상대적; }

#divJSOutputLineNo { 너비:32px; 높이:100%; 오버플로:숨김; 배경색:#DDD; 위치:절대; 왼쪽:0px; 상단:0px;
텍스트 정렬:오른쪽; }

#divJSOutputLineNo p { font-size:12px; 줄 높이:14px; }

#divJSOutputPlus { 너비:14px; 높이:100%; 오버플로:숨김; 배경색:#EEE; 위치:절대; 왼쪽:32px; 상단:0px; z
-색인:2; }

#divJSOutputPlus p { 글꼴 크기:12px; 줄 높이:14px; }

#divJSOutput { 배경색:흰색; 테두리:1px 삽입 버튼페이스; 높이:100%; 위치:절대; 왼쪽:45px; 상단:0px;
오버플로:스크롤; }

#divWaiting { display:none; 너비:400px; 높이:60px; 테두리:1px 솔리드 버튼페이스; 위치:절대; 배경-
색상:#E0F0F0; z-색인:3; 텍스트 정렬:가운데; 패딩 상단:10px; }

#div입력 대기 중 { width:140px; 높이:22px; 테두리:1px 솔리드 #555; 줄 높이:20px; 커서:기본값; 여백 상단:4px; }

#divJSExport { display:none; 너비:600px; 높이:450px; 테두리:2px 시작 버튼페이스; 위치:절대; 배경-
color:buttonface; z-색인:2; }

#divJSExportTitle { color:white; 배경색:네이비; 높이:20px; 줄 높이:20px; 패딩:0px 10px; 커서:기본값; }

#selJSExport { 너비:598px; 높이:406px; 오버플로:자동; 패딩:4px 8px; 배경색:흰색; }

#divJSExportContent { 너비:598px; 높이:406px; 오버플로:자동; 패딩:4px 8px; 배경색:흰색; 표시:없음; }

#divJSExportBar { 높이:24px; 패딩:0px 4px; }

#divJSExportBar 입력 { 너비:170px; 높이:22px; 테두리:1px 솔리드 #555; 줄 높이:20px; }

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");
 
 // 초기화 창 상태
 최대화W <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;
 
 
 // 글로벌 이벤트 초기화
 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>
// 이벤트 스크립트
//------

함수 취소이벤트(e) <br>{
 var e=window.event?window.event:e;
 e.returnValue=false;
 반환 <br>(거짓);
}

함수 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); // FF를 지원하지 않음 
 }
} <br>

함수 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();
}

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

//------
// 기능적 스크립트
//------------ <br>-------

함수 showJSInput(){
 if(glbBusy)return;
 hideJSExport <br>();
 with(divJSInput.style){
  디스플레이="차단";
  왼쪽= <br>(document.body.clientWidth-divJSInput.offsetWidth)/2;
  top=(document.body.clientHeight- <br>divJSInput.offsetHeight)/2;
 }
 
 txtJSInput.focus <br>();
 
 반환(거짓);
}

함수 showJSExport() <br>{
 if(glbBusy)return;
 hideJSInput();
 with(divJSExport.style) <br>{
  디스플레이="차단";
  왼쪽=(document.body.clientWidth- <br>divJSExport.offsetWidth)/2;
  상단=(document.body.clientHeight</divjsoutputplus.buttons.length>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="JavaScript 스크립트를 사용하여 웹 페이지에서 정보 상호 작용 실현_javascript 기술" href="https://m.php.cn/ko/faq/27008.html">JavaScript 스크립트를 사용하여 웹 페이지에서 정보 상호 작용 실현_javascript 기술</a></span><span>다음 기사：<a class="dBlack" title="JavaScript 스크립트를 사용하여 웹 페이지에서 정보 상호 작용 실현_javascript 기술" href="https://m.php.cn/ko/faq/27010.html">JavaScript 스크립트를 사용하여 웹 페이지에서 정보 상호 작용 실현_javascript 기술</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</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/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</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>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/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>