몇 가지 작은 예 를 들 어 정규 표현 식 하 이 라이트 하 이 라 이 트 를 실현 하 는 방법 을 알려 드 립 니 다.

프로그래머 가 코드 를 작성 할 때 문자열 과'조회'를 만 나 는 것 이 빠 질 수 없습니다.이들 의 교 집합 에는 정규 표현 식 이라는 것 이 있 습 니 다.이 녀석 이 잘 사용 하면 프로 그래 밍 효율 을 높 일 수 있 습 니 다.잘 사용 하지 못 하면...먼저 배 워 보 세 요.
정규 사용 에 대해 간단 한 예 를 들 어 보 자.

var m = location.href.match(/(\w+:)\/{0,3}([^\/]+)(?:(\/[^\?#]*))?(?:(\?[^#]+|.+))?(?:(#.*))?/);
var res = {
    protocol: m[1],
    host: m[2],
    path: m[3],
    search: m[4],
    hash: m[5]
};
console.log(res);
몇 분 동안 참 았 다content)가 무슨 뜻 이에 요?content)와(?=content)조별 과 전망 에 대한 지식 은 도 고 와 곡 모 에 게 물 어보 자.
1.정규 응용 작은 DEMO 예제
다음은 손 으로 쓴 코드 입 니 다.textarea 에 놓 으 십시오.

/**
* @author barret lee
* @date   2013-10-06
* @email  [email protected]
*/

//outer var
var a = "this id outer string";

//closure
function b() {
 //inner var
 var a = "this is inner string";
 var g = a.replace(/this is inner string/g, function() {
  return new Function("/*clousure*/this.a")();
 });

 /**
 * @description closure - regExp test
 * @author barret lee
 */
 function c() {
  return {
   a: a,
   g: g
  }
 }

 return c;
}

var s = b()(); //s.a, s.g

위의 문자열 을 처리 하 는 작은 DEMO 와 일치 합 니 다.

/**
* @author barret lee
* @date 2013-10-06
* @email [email protected]
*/

//outer var
var a = "this id outer string";

//closure
function b() {
    //inner var
    var a = "this is inner string";
    var g = a.replace(/this is inner string/g, function() {
        return new Function("/*clousure*/this.a")();
    });

    /**
    * @description closure - regExp test
    * @author barret lee
    */
    function c() {
        return {
            a: a,
            g: g
        }
    }

    return c;
}

var s = b()(); //s.a, s.g

힌트 에 따라 다음 단계 에 몇 번 더 하면 효과 가 떨 어 지 는 지 알 수 있다.주로 이곳 의 정규 가 약간 번 거 로 워 서 한 가지 색 을 처리 하 는 것 이 한참 동안 궁리 하 게 되 었 다.
P.S:위 에 있 는 이 물건 은 작은 테스트 일 뿐 입 니 다.코드 가 상당히 건장 하지 않 습 니 다.들 고 공부 하 는 정규 연습 입 니 다~
2.주의해 야 할 점

//step config
var config = {
    regs: [
        /^\s+|\s+$/g,
        /(["'])(?:\\.|[^\\
])*?\1/g,
        /\/(?!\*|span).+\/(?!span)[gim]*/g,
        /(\/\/.*|\/\*[\S\s]+?\*\/)/g,
        /(\*\s*)(@\w+)(?=\s*)/g,
        /\b...\b/g
    ],
  //...
};
이 정규 들 은 내 가 따로 쓴 것 이다.주로 위의 그 demo 를 만 들 기 위해 서 한 걸음 에 표시 하기 편리 하 다.그러나 이 정규 들 을 나 누 어 쓰 는 것 은 상당히 불합리 하 다.textarea 에 놓 인 것 은 태그 가 없 는 문자열 이다.착색 을 위해 서 는 모든 정규 처리 가 codes 에 태그(내 가 사용 하 는 것 은 span)를 삽입 한다.우리 가 다음 정규 를 처리 할 때 다음 단계 에 추 가 된 태 그 를 고려 해 야 한다.그러면 개발 난이 도 를 어느 정도 높 일 수 있다.가장 좋 은 방법 은 이 정규 들 을 모두 덩어리 에 넣 고|으로 분리 하 는 것 이다.

var reg = (/^\s+|\s+$/)|(/(["'])(?:\\.|[^\\
])*?\1/)|(/\/(?!\*|span).+\/(?!span)[gim]*/)|(/(\/\/.*|\/\*[\S\s]+?\*\/)/)|(/(\*\s*)(@\w+)(?=\s*)/)|(/\b(break|continue|do|for|in|function|if|else|return|switch|throw|try|catch|finally|var|while|with|case|new|typeof|instance|delete|void|Object|Array|String|Number|Boolean|Function|RegExp|Date|Math|window|document|navigator|location|true|false|null|undefined|NaN)\b)
이렇게 넣 으 면 좋 은 점 은 바로...

codes.replace(reg, function(){
    var args = arguments;
    //...
});
한꺼번에 처리 하면 라벨 삽입 이 마지막 결과 에 영향 을 미 칠 까 봐 걱정 하지 않 아 도 됩 니 다.라벨 은 같은 시간 에 삽입 되 어 방해 가 되 지 않 기 때 문 입 니 다.
코드 하 이 라이트 플러그 인 하 이 라이트 의 기본 원리 도 많 지 않 습 니 다.다만 그의 잘못 사용 체제 와 코드 건장 성 은 더욱 완선 되 었 습 니 다.저 는 코드 에 프로필 을 추가 하 였 습 니 다.

var colors = {
    string: "#FFA0A0",
    reg: "#16E916",
    note: "#888",
    tag: "orange",
    keywords: "#B0B0FF"
};
자신의 취향 에 따라 수정 할 수도 있 습 니 다.이와 같은 확장 은 코드 를 쓸 때 조금 만 주의 하고 인 터 페 이 스 를 몇 개 더 남 겨 두 면 됩 니 다.(그래도 힘 든 일 인 데~)
플러그 인 을 만 들 지 않 았 다 면 그 럴 필요 도 없 었 다.기본 원 리 를 알 고 실천 하 는 것 은 많 지 않 았 다.
작은 매듭
많은 전단 템 플 릿,artTemplate,baiduTemplate 등 은 모두 정규 표현 식 에 대한 절 륜 응용 으로 소스 코드 를 볼 가치 가 있 습 니 다.사람들 이 실수 하기 쉬 운 점 을 잘 고려 했 습 니 다.소스 코드 가 길지 않 고 이 삼 백 줄 입 니 다.하 나 를 이해 하 는 것 은 비교적 쉬 운 일이 지만,자신 이 손 을 쓸 때 많은 세부 적 인 문 제 를 잘 처리 하지 못 한 다 는 것 을 알 게 될 것 이다.나의 위의 몇 가지 정칙 은 반나절 동안 거꾸로 만 들 었 다.
정규 표현 식 은 사용 하기에 매우 편리 하 다.정규 기술,가 질 만 해~
 

좋은 웹페이지 즐겨찾기