정규 표현 식 의 JavaScript 코드 하 이 라 이 트 를 어떻게 실현 합 니까?

오늘 은 JS 의 하 이 라이트 배색 을 바 꾸 려 고 오후 내 내 이 정규 표현 식 을 참 았 습 니 다.아래 의 이 늙 고 긴 물건 은 정규 표현 식 이 니 보고 놀 라 지 마 세 요.

/(\/\/.*|\/\*[\S\s]+?\*\/)|((["'])(?:\\.|[^\\
])*?\3)|\b(break|continue|do|for|in|function|if|else|return|switch|this|throw|try|catch|finally|var|while|with|case|new|typeof|instance|delete|void)\b|\b(Object|Array|String|Number|Boolean|Function|RegExp|Date|Math|window|document|navigator|location)\b|\b(true|false)\b|\b(null|undefined|NaN)\b|(?:[^\W\d]|\$)[\$\w]*|(0[xX][0-9a-fA-F]+|\d+(?:\.\d+)?(?:[eE]\d+)?)|(?:[^\)\]\}]|^)(\/(?!\*)(?:\\.|[^\\\/
])+?\/[gim]*)|[\S\s]/g 

이제 우 리 는 그것 을 천천히 분석 할 수 있다.이 정규 표현 식 을 자세히 보면 많은 정규 표현 식 이|으로 연결 되 어 있 음 을 알 수 있 습 니 다.지금 우 리 는 그것 을|분할 하여 하나씩 분석한다.

(\/\/.*|\/\*[\S\s]+?\*\/)

이것 은 두 번 째 입 니 다.이 정규 표현 식 은 문자열 과 일치 하 는 것 입 니 다.문자열 은 작은 따옴표 와 작은 따옴표 에 있 을 수 있 기 때문에 우 리 는 이 두 개의 임의의 따옴표 와 일치 합 니 다.이것 은 괄호 로 묶 어서 일치 하 는 것 을 표시 해 야 합 니 다("일치 하 는 것 을 가 져 오기"의"가 져 오기"는 명사 입 니 다).끝 난 곳 에 이 문자 와 일치 해 야 하기 때 문 입 니 다.문자열 이 끝 난 곳 에 서 는 문자열 이 시 작 된 문자,즉 시작 할 때의 따옴표 종 류 를 참조 할 수 있 습 니 다.이 전체 정규 표현 식 의 시작 부분 부터 세 면["]바깥 의 괄호 는 전체 정규 표현 식 의 세 번 째 일치 하 는 것 을 발견 할 수 있 습 니 다.이것 이 바로 문자열 의 끝 부분 입 니 다.중간 부분 은 문자열 이 전 의 를 포함 할 수 있 기 때문에 우 리 는 역 슬 래 쉬 를 만나면 바로 그 뒤의 문 자 를 뛰 어 넘 습 니 다.역 슬 래 쉬 뒤에 포 함 된 것 은 전의 이기 때 문 입 니 다.그러나 이것 은 단지 전의 와 일치 하기 때문에 우 리 는 연산|비 전의 와 일치 하 는 표현 식 을 연결 해 야 합 니 다.그것 이 바로[^\\]입 니 다.그러나 이것 은 역 슬 래 쉬 가 아 닌 모든 문자 입 니 다.줄 바 꿈 을 포함 할 수 있 고 JS 의 문자열 은 줄 바 꿈 으로 쓸 수 없습니다.그래서 줄 이 맞지 않도록 추가 해 야 합 니 다.우리 가 사용 하거나 연결 하거나 우선 순위 가 매우 낮 기 때문에 옆 에 괄호 를 붙 여 우선 순 위 를 수정 해 야 합 니 다.일반적인 괄호 를 사용 하면 일치 하 는 가 져 오기(?:)를 사용 합 니 다.비 가 져 오기 매 칭 을 완성 합 니 다.

\b(break|continue|do|for|in|function|if|else|return|switch|this|throw|try|catch|finally|var|while|with|case|new|typeof|instance|delete|void)\b|\b(Object|Array|String|Number|Boolean|Function|RegExp|Date|Math|window|document|navigator|location)\b|\b(true|false)\b|\b(null|undefined|NaN)\b 

이것 은 3,4,5,6 번 째 입 니 다.이것들 은 단지 키워드 와 일치 할 뿐 필요 한 색깔 이 다 르 기 때문에 그룹 을 나 누 었 습 니 다.이것 은 할 말 이 없 으 니 뛰 어 넘 어 라.

(?:[^\W\d]|\$)[\$\w]*

이것 은 일곱 번 째 입 니 다.일반적인 변수 이름 과 일치 하 는 역할 을 합 니 다.변수 이름 의 문자 가 소모 되 지 않 으 면 뒤에 있 는 숫자 와 일치 하 는 숫자 는 변수 이름 의 숫자 를 일치 시 켜 질 수 있 습 니 다.그 러 니 이 단 계 는 필수 다.변수 이름 의 색상 이 기본 색상 이기 때문에 가 져 오지 않 습 니 다.JS 의 명명 규칙 에 따 르 면 변수 이름 은 숫자 로 시작 할 수 없 기 때문에 우 리 는[^\W\d]|\$로 변 수 를 시작 합 니 다.뒤 에는 숫자,자모,밑줄,달러 기호 와 일치 하여 임의로 할 수 있다.이렇게 변수 이름 이 소모 되 었 다.

(0[xX][0-9a-fA-F]+|\d+(?:\.\d+)?(?:[eE]\d+)?)

이것 은 여덟 번 째 로 숫자 와 일치 하 는 것 이다.숫자의 표현 방식 은 두 가지 가 있 기 때문에 우 리 는 따로 써 야 한다.의 왼쪽 은 16 진법 의 숫자 표기 법 이다.오른쪽 은 일반적인 숫자 표기 법 으로 소수 와 과학 계수 법 을 포함 할 수 있다.소수 와 과학 계수 법 은 모두 선택 할 수 있 는 존재 이기 때문에 우 리 는 그것 을 괄호 로 묶 고 뒤에 물음 표를 붙 여 선택 할 수 있 는 일치 로 한다.

(?:[^\)\]\}]|^)(\/(?!\*)(?:\\.|[^\\\/
])+?\/[gim]*)

이것 은 정규 표현 식 과 일치 하 는 아홉 번 째 입 니 다.앞 에 괄호 가 아 닌 끝 에 일치 하 는 비 가 져 오기 가 있 습 니 다.괄호 가 존재 한다 면,경사 봉 은 정규 표현 식 이 아 닌 나 누 기 를 표시 할 수 있 기 때문이다.다음은 정규 표현 식 의 일치 입 니 다.문자열 의 일치 와 유사 합 니 다.마지막 에[gim]*가 하나 더 생 겼 을 뿐 입 니 다.이것 은 정규 표현 식 의 세 가지 일치 모드 이자 정규 표현 식 의 범주 에 속 하기 때문에 우 리 는 그것 을 일치 시 키 고 가 져 와 야 합 니 다.

[\S\s]

마지막 으로 위 에 일치 하지 않 는 모든 문자 와 일치 합 니 다.모든 문자 와 일치 해 야 합 니 다.HTML 전의 가 필요 하기 때문이다.이렇게 해서 이 긴 정규 분석 이 끝났다.다음은 실현 의 예 다.

<style>body {font:14px/18px Consolas;}</style>
<script id="code">
//      
var code=document.getElementById("code").innerHTML;
//          ，          
code=code.replace(/\r
|[\r
]/g,"
").replace(/^\s+|\s+$/g,"");
//     
code=code.replace(/(\/\/.*|\/\*[.\s]+?\*\/)|((["'])(?:\\.|[^\\
])*?\3)|\b(break|continue|do|for|in|function|if|else|return|switch|this|throw|try|catch|finally|var|while|with|case|new|typeof|instance|delete|void)\b|\b(Object|Array|String|Number|Boolean|Function|RegExp|Date|Math|window|document|navigator|location)\b|\b(true|false)\b|\b(null|undefined|NaN)\b|(?:[^\W\d]|\$)[\$\w]*|(0[xX][0-9a-fA-F]+|\d+(?:\.\d+)?(?:[eE]\d+)?)|(?:[^\)\]\}]|^)(\/(?!\*)(?:\\.|[^\\\/
])+?\/[gim]*)|[.\s]/g,function(){
  var a,l,i,s;
  a=arguments;
  //        
  for(i=1;i<=9;i++)if(s=a[i]){
    s=htmlEncode(s);
    //                 
    switch(i){
      case 1://  
      return s.fontcolor("#998877").italics();
      case 2:case 3://   
      return s.fontcolor("#AA5544");
      case 4://   
      return s.fontcolor("#333388");
      case 5://    
      return s.fontcolor("#5555AA");
      case 6://   
      return s.fontcolor("#DD6600");
      case 7://  
      return s.fontcolor("#BB4433");
      case 8://  
      return s.fontcolor("#CC3322");
      case 9://     
      //      ，            
      //     ，         ，               
      return htmlEncode(a[0]).replace(s,s.fontcolor("#33AA33"));
    };
  };
  //             
  return htmlEncode(a[0]);
});
//    
document.write(code);
//HTML     
function htmlEncode(e){
  var i,s;
  for(i in s={
    "&amp;":/&/g,"&quot;":/"/g,"&#039;":/'/g,
    "&lt;":/</g,"&gt;":/>/g,"<br/>":/
/g,
    "&nbsp;":/ /g,"&nbsp;&nbsp;":/\t/g
  })e=e.replace(s[i],i);
  return e;
};
</script>

오늘 이 글 을 서 두 르 고 있 기 때문에 이 코드 의 최 적 화 를 할 시간 이 없다.작은 구멍 이 많 을 텐 데 전체적인 생각 은 그렇다.이렇게 하면 JS 든 다른 어떤 언어 든 코드 하 이 라 이 트 는 바로 정칙 으로 일치 할 수 있다.