javascript 정규 표현 식 학습 위치 일치
정규 표현 식 은 일치 모드 입 니 다.일치 하 는 문자 나 일치 하 는 위치 입 니 다.
사실 개발 에 있어 서 일치 하 는 위 치 를 사용 하지 않 습 니 다.본 글 은 주로 다음 과 같 습 니 다.
위치
위치:인접 문자 사이 의 위치.
3.위치 매 칭 방법
ES5 에는 모두 6 개의 닻 이 있다.^,$,\b,\B,(?=p), (?!p)
시각 화 형식:
RegExp:/^$\b\B(?=a)(?!b)/g
3.1^와$
^(탈자)는 시작 과 일치 하고 여러 줄 의 일치 에서 줄 의 시작 과 일치 합 니 다.
$(달러 문자)가 끝 과 일치 합 니 다.여러 줄 의 일치 에서 줄 의 끝 과 일치 합 니 다.
예 를 들 어 문자열 의 시작 과 끝 을\#로 바 꿉 니 다.(위 치 는 문자 로 바 꿀 수 있 습 니 다.)
var result = "hello".replace(/^|$/g, '#');
console.log(result);
// "#hello#"
다 중 줄 일치 모드(수정자 m)가 있 을 때 두 가 지 는 줄 의 개념 이 므 로 주의해 야 합 니 다.
var result = "I
love
javascript".replace(/^|$/gm, '#');
console.log(result);
// #I#// #love#// #javascript#
3.2\b 와\B\b 는 단어 경계 입 니 다.구체 적 으로\w 와\W 사이 의 위치 입 니 다.\w 와^사이 의 위치 와\w 와$사이 의 위치 도 포함 합 니 다.
예 를 들 어 파일 이름 고찰"[JS]Lesson01.mp4"중의\b 는 다음 과 같다.
var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#');
console.log(result);
// "[#JS#] #Lesson_01#.#mp4#"
우선,우 리 는\w 가 문자 그룹[0-9a-zA-Z]의 약자 임 을 알 고 있 습 니 다.알파벳 숫자 나 밑줄 에 있 는 모든 문자 라 도.그리고\W 는 문자 그룹[^0-9a-zA-Z]의 약자 입 니 다.즉,\W 는\w 이외 의 모든 문자 입 니 다.우리 다시 보 자\#어떻게 왔 는 지:
제. 1 문자 "[" ...과 "J \W ...과 \w 사이 의 위치.
제. 2 문자 "S" ...과 "]",그 러 니까 \w ...과 \W 사이 의 위치.
제. 3 개,양쪽 문 자 는 빈 칸 과 "L \W ...과 \w 사이 의 위치.
제. 4 문자 "1" ...과 ".",그 러 니까 \w ...과 \W 사이 의 위치.
제. 5 문자 "." ...과 "바로 \W ...과 \w 사이 의 위치.
제. 6 앞 글자 "4" 예. \w,즉 \w ...과 $ 사이 의 위치.
\b 개념 을 알 게 되면\B 는 쉽게 이해 할 수 있 습 니 다.\b 는 단어 경계 입 니 다.\B 는 비 단어 경계 입 니 다.
var result = "[JS] Lesson_01.mp4".replace(/\B/g, '#');
console.log(result);
// "#[J#S]# L#e#s#s#o#n#_#0#1.m#p#4"
3.3 (?=p)와(?!p)(?=p)그 중에서 p 는 키 모드 입 니 다.즉,p 앞 위치 입 니 다.(이 위치 뒤의 문 자 는 p 와 일치 해 야 합 니 다)
예 를 들 면:(?=e),e 문자 앞 위 치 를 나타 낸다.
var result = "hello".replace(/(?=l)/g, '#');
console.log(result);
// "he#l#lo"
그리고(?!p)바로(?=p)의 부정적인 의미
var result = "hello".replace(/(?!l)/g, '#');
console.log(result);
// "#h#ell#o#"
두 사람의 학명 은 각각 positive lookahead
과 negative lookahead。중국어 번역 은 각각 정방 향 선행 단언 과 마이너스 선행 단언 이다.
ES5 다음 버 전 지원 positive lookbehind 화해시키다 negative lookbehind。
구체 적 (?<=p) 화해시키다 (?위치 특성
위치 에 대한 이해 로 우 리 는 누적 액 을 빈 문자 로 만 들 수 있다.
예 를 들 어'hello'문자열 은 다음 과 같은 형식 입 니 다.
"hello" == "" + "h" + "" + "e" + "" + "l" + "" + "l" + "" + "o" + "";
등가
"hello" == "" + "" + "hello"
그래서 /^hello$/ 쓰다 /^^hello$$$/,아무 문제 없습니다:
var result = /^^hello$$$/.test("hello");
console.log(result);
// true
문자 사이 의 위 치 를 여러 개 로 쓸 수 있다 는 것 이다.주:위 치 를 빈 문자 로 이해 하 는 것 은 위치 에 대한 매우 효과 적 인 이해 방식 입 니 다.
관련 사례
5.1 아무것도 일치 하지 않 는 정규
/.^/
정규 요 구 는 한 글자 만 있 지만 이 문자 뒤 에는 시작 이 고 이런 문자열 은 존재 하지 않 습 니 다.
5.2 숫자의 천 분 위 구분자 표현법
예 를 들 어 12345678 은 12,345,678 이 된다.
분석:그것 은 해당 위 치 를'로 바 꿔 야 한 다 는 것 이다.
5.2.1 마지막 쉼표 빼 기
정규:/(?=\d{3}$)/
var result = "12345678".replace(/(?=\d{3}$)/g, ',')console.log(result);
// 12345,678
그 중d{3}$)는\d{3}$앞 자리 와 일치 합 니 다.\d{3}$가 일치 하 는 것 은 대상 문자열 의 마지막 3 을 숫자 로 합 니 다.5.2.2 쉼표 가 많아 요.
쉼표 가 나타 나 는 위치 때문에 뒤쪽 에 세 개의 숫자 를 한 그룹 으로 요구 합 니 다.즉,\d{3}은 적어도 한 번 은 나타 나 야 합 니 다.
양사 사용 가능+:
var result = "12345678".replace(/(?=(\d{3})+$)/g, ',')console.log(result);
// 12,345,678
5.2.3 다른 사례 와 일치정규 를 쓴 후에 개별 사례 를 들 어 검증 해 야 하 는데 문 제 를 발견 할 수 있다.
var result = "123456789".replace(/(?=(\d{3})+$)/g, ',')console.log(result);
// ,123,456,789
위의 정규 는 끝 에서 앞으로 세 는 것 을 의미 할 뿐 3 의 배수 로 술집 앞 자 리 를 쉼표 로 바꾼다.요구 사항 이 필요 합 니 다.일치 하 는 이 위 치 는 시작 일 수 없습니다.
우 리 는 시작 이 일치 하 는 것 이^를 사용 하 는 것 이라는 것 을 알 고 있 지만,시작 이 어떻게 되 는 것 입 니까?
사용(?!^)
var regex = /(?!^)(?=(\d{3})+$)/g;var result = "12345678".replace(regex, ',')console.log(result);
// "12,345,678"result = "123456789".replace(regex, ',');
console.log(result);// "123,456,789"
5.2.4 다른 형식 지원하면,만약,만약... "12345678 123456789" 바꾸다 "12,345,678 123,456,789"。
이때 우 리 는 정칙 을 수정 하여 안의 시작 을 해 야 한다. ^ 결말 $,고치다 \b:
var string = "12345678 123456789",regex = /(?!\b)(?=(\d{3})+\b)/g;
var result = string.replace(regex, ',')console.log(result);
// "12,345,678 123,456,789"
그 중b)어떻게 이해 해요?요 구 는 현재 의 한 위치 이지 만\b 앞의 위치 가 아 닙 니 다.사실은(?!\b)B 를 말 합 니 다.
그래서 결국 정 규 는
:/\B(?=(\d{3})+\b)/g。
이 되 었 다.시각 화 형식:
RegExp:/\B(?=(\d{3})+\b)/g
5.2.5 화폐 포맷
천분 자 표현법 에서 흔히 볼 수 있 는 응용 은 바로 화폐 포맷 이다.
이 문자열 을:
포맷:
$ 1888.00
실현:
function format (num) {return num.toFixed(2).replace(/\B(?=(\d{3})+\b)/g, ",").replace(/^/, "$ ");
};
console.log( format(1888) );
// "$ 1,888.00"
5.3 비밀번호 검증 문제암호 길 이 는 6-12 로 숫자,소문 자,대문자 로 구성 되 어 있 으 나 최소 2 가지 문 자 를 포함해 야 합 니 다.
여러 개의 정규 로 써 판단 하 는 것 은 비교적 쉽 지만,하나의 정규 로 쓰 는 것 은 비교적 어렵다.
위치 에 대한 우리 의 이해 가 깊 은 지 살 펴 보 자.
5.3.1 간소화
"최소 2 개의 문 자 를 포함해 야 합 니 다"라 는 조건 을 잠시 고려 하지 않 고 쉽게 쓸 수 있 습 니 다.
var regex = /^[0-9A-Za-z]{6,12}$/;
5.3.2 어떤 문자 가 포함 되 어 있 는 지 판단가령,우리 가 반드시 숫자 를 포함해 야 한다 고 요구한다 면,어떻게 해 야 합 니까?이때 우 리 는 사용 할 수 있다(?=.*[0-9])실현 합 니 다.
정규
var regex = /(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;
5.3.3 구체 적 인 두 가지 문 자 를 동시에 포함한다.예 를 들 어 숫자 와 소문 자 를 동시에 포함 하여 사용 할 수 있 습 니 다(?=.*[0-9])(?=.*[a-z])실현 합 니 다.
정규
var regex = /(?=.*[0-9])(?=.*[a-z])^[0-9A-Za-z]{6,12}$/;
5.3.3 구체 적 실현원 제 를 다음 과 같은 몇 가지 상황 으로 바꾸다.
1.숫자 와 소문 자 를 동시에 포함한다.
2.숫자 와 대문자 도 포함한다.
3.소문 자 와 대문자 도 포함한다.
4.숫자,소문 자,대문자 도 포함한다.
이상 의 4 중 상황 또는 관계(실제로 4 조 는 사용 하지 않 아 도 된다).
최종 답안:
var regex = /((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[AZ]))^[0-9A-Za-z]{6,12}$/;console.log( regex.test("1234567") );
// false console.log( regex.test("abcdef") );
// false console.log( regex.test("ABCDEFGH") );
// false console.log( regex.test("ab23C") );
// false 6 console.log( regex.test("ABCDEF234") );
// true console.log( regex.test("abcdEF234") );
// true
시각 화 형식:RegExp:/((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[AZ]))^[ 0-9A-Za-z]{6,12}$/
분석:
위의 정칙 은 보기에 매우 복잡 하 다.두 번 째 단계 만 이해 하면 된다./(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;
이 정규 에 대해 우 리 는 이해 해 야 한다(?=.*[0-9])^이거;
따로 보면(?=.*[0-9]) 화해시키다 ^。
시작 앞 에 위치 가 있 음 을 나타 낸다.
(?=.*[0-9]) 이 위치 뒤의 문자 가 일치 하 는 것 을 표시 합 니 다.
.*[0-9],즉,임의의 문자 가 여러 개 있 으 면 뒤에 숫자 를 따라 갑 니 다.
대 백화 로 번역 하면 다음 문자 입 니 다.숫자 를 포함해 야 합 니 다.
5.3.4 다른 해법
'적어도 두 글자 가 포함 된다'는 뜻 은 전부 숫자 일 수도 없고 전부 소문 자 일 수도 없고 전부 대문자 일 수도 없다 는 것 이다.
그러면"전부 숫자 일 수 는 없다"고 요구 하 는데 어떻게 할 까요? (?!p) 나 서 라!
대응 하 는 정규:
var regex = /(?!^[0-9]{6,12}$)^[0-9A-Za-z]{6,12}$/;
세 가지'다 못 해'는 요?최종 답 은:
var regex = /(?!^[0-9]{6,12}$)(?!^[a-z]{6,12}$)(?!^[A-Z]{6,12}$)^[0-9A-Za-z]{6,12}$/;
console.log( regex.test("1234567") );
// false console.log( regex.test("abcdef") );
// false console.log( regex.test("ABCDEFGH") );
// false console.log( regex.test("ab23C") );
// false 6 console.log( regex.test("ABCDEF234") );
// true console.log( regex.test("abcdEF234") );
// true
시각 화 형식:RegExp:/(?!^[0-9]{6,12}$)(?!^[a-z]{6,12}$)(?!^[A-Z]{6,12}$)^[0-9A-Za-z]{6,12}$/;
총결산
위 에서 말 한 것 은 소 편 이 소개 한 자 바스 크 립 트 정규 표현 식 학습 의 위치 가 일치 하 므 로 여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.