JavaScript 정규식, 이 글이면 충분합니다

VUE3.0을 빠르게 시작하는 방법: 학습 입력

관련 권장 사항: JavaScript 자습서

정규 표현식이란 무엇입니까

정규 표현식 ( 정규 표현식, regexp라고 함 )

• 은 문자열의 구조를 설명하는 문법 규칙입니다.
• 다양한 문자열이 이 기능과 일치하는지 확인하여 고급 텍스트 검색, 교체, 콘텐츠 차단 및 기타 작업을 가능하게 하는 데 사용되는 특정 형식화 패턴입니다.

적용: 프로젝트 개발 시 휴대폰 번호의 특정 숫자 숨기기, 데이터 수집, 민감한 단어 필터링, 양식 확인 등의 기능을 모두 정규식을 사용하여 구현할 수 있습니다.

적용분야 : 운영체제(Unix, Linux 등), 프로그래밍 언어(C, C++, Java, PHP, Python, JavaScript 등).

예: 텍스트 검색을 예로 들어 보겠습니다. 대량의 텍스트에서 특정 기능(예: 휴대폰 번호)과 일치하는 문자열을 찾은 경우 정규 표현식의 구문에 따라 이 기능을 작성하여 컴퓨터 프로그램이 인식한 패턴( 패턴)을 사용하면 컴퓨터 프로그램이 이 패턴에 따라 텍스트를 일치시켜 규칙에 맞는 문자열을 찾습니다.

정규식의 역사

정규식의 표현 형태

• 하나는 운영 체제 간의 이식성을 보장하는 데 사용되는 POSIX 사양 호환 정규식입니다.
• 하나는 Perl(기능이 풍부한 프로그래밍 언어)이 개발되었을 때 Perl 정규 표현식이 파생되었다는 것입니다. JavaScript의 정규 구문은 Perl을 기반으로 합니다.

정규식 사용 방법

개발 중에는 정규 일치 패턴을 기반으로 지정된 문자열을 검색하고 일치시켜야 하는 경우가 많습니다.

exec() 메소드

• exec() 메소드는 대상 문자열에서 일치하는 항목을 검색하는 데 사용되며 한 번에 하나의 일치하는 결과만 반환합니다.
• 예를 들어 지정된 문자열 str에서 abc를 검색합니다.

• "/abc/i"의 "/"는 정규식의 구분 기호이고, "abc"는 정규식의 패턴 텍스트를 나타내며, "i"는 패턴 수정 식별자로, str에서 대소문자가 무시된다는 의미입니다.
• exec() 메서드의 매개 변수는 일치할 문자열 str입니다. 일치에 성공하면 이 메서드의 반환 값은 배열이고, 그렇지 않으면 null을 반환합니다.
• exec()의 반환 결과를 보면 배열에 저장된 첫 번째 요소(AbC)가 일치하는 문자열을 나타내고 두 번째 요소 인덱스는 대상 문자열에서 일치하는 문자의 인덱스 값을 나타냅니다(0부터 시작). ; 세 번째 매개변수 입력은 대상 문자열(AbC123abc456)을 나타냅니다.

match() 메소드

문자열에서 지정된 값을 검색하는 것 외에도 String 객체의 match() 메소드는 일반 규칙에 따라 대상 문자열의 요구 사항을 충족하는 모든 내용을 일치시키고 이를 다음 배열에 저장할 수도 있습니다. 일치가 성공하면 일치가 실패하면 false를 반환합니다.

• 로케이터 "^"를 사용하여 문자열의 시작 부분을 일치시킬 수 있습니다.
• 위치 지정자 "$"를 사용하여 문자열 끝을 일치시킬 수 있습니다.
• g는 첫 번째 일치 항목을 찾은 후 계속 검색하는 데 사용되는 전역 일치 항목을 나타냅니다.

일반 객체 얻기

JavaScript 애플리케이션에서는 정규식을 사용하기 전에 먼저 일반 객체를 생성해야 합니다. 앞에서 설명한 리터럴 생성 외에도 RegExp 개체의 생성자를 통해 생성할 수도 있습니다.

• 패턴은 메타문자와 리터럴 문자로 구성된 정규식 패턴 텍스트입니다.
• 메타문자는 "^", "." 또는 "*"와 같은 특별한 의미를 갖는 문자입니다.
• 텍스트 문자는 문자, 숫자 등의 일반 텍스트입니다.
• 플래그는 정규식을 추가로 설정하는 데 사용되는 패턴 수정 식별자를 나타냅니다.
  
  

• 모드 수정자는 실제 필요에 따라 여러 조합으로 사용할 수도 있습니다.
• 예를 들어 대소문자를 무시하고 전역적으로 일치시키려면 gi를 직접 사용할 수 있으며 여러 패턴 수정자를 작성할 때 순서 요구 사항이 없습니다.
• 따라서 패턴 수정자를 합리적으로 사용하면 정규식을 더욱 간결하고 직관적으로 만들 수 있습니다.

독자들이 일반 객체 획득에 대해 더 잘 이해할 수 있도록 특수 문자 "^", "$", "*", "." 및 ""를 매칭하여 비교 설명합니다.

• 선택자 "|"는 "또는"을 의미하며, 조건 중 하나라도 만족하면 검색 조건이 성립됩니다.
• JavaScript의 문자열에는 이스케이프 문제가 있으므로 코드에서 str의 ""는 백슬래시 ""를 나타냅니다.
• 정규식에서 특수 문자를 일치시킬 때 특수 문자를 이스케이프하려면 백슬래시()도 필요합니다. 예를 들어, "\"는 문자열 이스케이프 후에 ""가 되고 정규식은 ""를 사용하여 ""와 일치시킵니다.

생성자 메서드와 리터럴 메서드로 생성된 일반 개체는 기능 면에서는 완전히 동일하지만 구문 구현에서는 특정 차이점이 있습니다. 전자 패턴은 사용할 때 백슬래시()를 이스케이프해야 합니다

.

후자의 패턴을 작성할 때는 구분자 "/" 안에 배치해야 하며, 플래그 태그는 종료 구분자 외부에 배치해야 합니다.

문자 카테고리의

: 문자 카테고리를 효과적으로 사용하면 정규식을 더 간결하고 읽기 쉽게 만들 수 있습니다.

예시 1: 대문자, 소문자, 숫자는 "w"를 사용하여 직접 표현할 수 있습니다.

사례 2: 0에서 9 사이의 숫자를 일치시키려면 "d"를 사용할 수 있습니다.

문자 카테고리 사용에 대한 독자의 이해를 돕기 위해 다음에서는 "." 및 "s"를 예시로 사용합니다.

• 일반 객체 reg는 공백 문자 뒤의 두 문자를 일치시키는 데 사용됩니다(줄 바꿈 제외).
• 따라서 콘솔에 표시된 결과에는 ID 앞에 공백이 있습니다.

문자 집합

문자 집합 표현: "[]"는 문자 집합을 구현할 수 있습니다.

문자 범위: 하이픈 "-"과 함께 사용하면 지정된 범위 내의 문자를 일치시킨다는 의미입니다.

반의어 문자: 메타 문자 "^"가 "[]"와 함께 사용되는 경우 이를 반의어 문자라고 합니다.

특정 범위 내에 있지 않음: "^"는 "[]"와 함께 사용되어 지정된 문자 범위 내에 없는 문자를 일치시킵니다.

일반적인 사용법을 보여주기 위해 'get好TB6'.match(/pattern/g) 문자열을 예로 들어 보겠습니다.

문자

는 일반적으로 일반 문자만 나타내며

문자 범위를 나타낼 때 메타 문자로만 사용됩니다. "-" 하이픈으로 표시되는 범위는 문자 인코딩 순서를 따릅니다. 예를 들어 "aZ", "za" 및 "a-9"는 모두 잘못된 범위입니다.

[사례] ​​입력 콘텐츠 제한

코드 구현 아이디어 :

HTML을 작성하고 연도(년)와 월(월)에 대한 텍스트 상자와 쿼리 버튼을 설정합니다.

작업의 요소 개체를 가져오고 양식 제출을 확인합니다.

연도를 확인하세요. 정규 형식은 /^d{4}/입니다. 월을 확인합니다. 일반 규칙: / ( ( 0 ? [ 1 − 9 ] ) ∣ ( 1 [ 012 ] ) ) /.

텍스트 상자에 초점이 맞춰지고 프롬프트 상자의 색상이 제거됩니다. 텍스트 상자는 포커스를 잃고 입력 내용 양쪽 끝의 공백을 제거한 후 유효성을 검사합니다.

코드 구현

	
	
	<머리>
	
	
	<스타일>
	입력[유형=텍스트]{너비: 40px;테두리 색상: #bbb;높이: 25px;글꼴 크기: 14px;테두리 반경: 2px;윤곽: 0;테두리: #ccc 1px 솔리드;패딩: 0 10px; -webkit-transition: box-shadow .5s;margin-bottom: 15px;}
	입력[유형=텍스트]:호버, 입력[유형=텍스트]:초점,입력[유형=제출]:hover{테두리: 1px 솔리드 #56b4ef; 상자 그림자: 삽입 0 1px 3px rgba(0,0,0, .05),0 0 8px rgba(82,168,236,.6) -webkit-transition: box-shadow .5s;}
	입력::-webkit-input-placeholder {색상: #999; -webkit-전환: 색상 .5s;}
	입력:초점::-webkit-input-placeholder, 입력:hover::-webkit-input-placeholder {color: #c2c2c2; -webkit-transition: color .5s;}
	입력[유형=제출]{높이: 30px; 너비: 80px; 배경: #4393C9; 단색 #fff; 색상: #fff;글꼴: 14px 더 }
	
	
	<본문>
	<양식 id="양식">
	연도
	월
	<입력 유형="제출" 값="쿼리">
	
	

	<스크립트>
	함수 checkYear(obj) {
	if (!obj.value.match(/^d{4}$/)) {
	obj.style.borderColor = '빨간색';
	result.innerHTML = '입력 오류, 연도가 4자리로 표시됩니다';
	거짓을 반환;
	}
	result.innerHTML = '';
	사실을 반환;
	}
	함수 checkMonth(obj) {
	if (!obj.value.match(/^((0?[1-9])|(1[012]))$/)) {
	obj.style.borderColor = '빨간색';
	result.innerHTML = '입력 오류, 월은 1에서 12 사이입니다';
	거짓을 반환;
	}
	result.innerHTML = '';
	사실을 반환;
	}
	var form = document.getElementById('form'); // 
 요소 객체 var result = document.getElementById('result'); // 
 요소 객체 var inputs = document.getElementsByTagName('input'); //  요소 컬렉션 form.onsubmit = function() {
	return checkYear(inputs.year) && checkMonth(inputs.month);
	};
	inputs.year.onfocus = 함수() {
	this.style.borderColor = '';
	};
	inputs.month.onfocus = 함수() {
	this.style.borderColor = '';
	};
	if (!String.prototype.trim) {
	String.prototype.trim = 함수() {
	return this.replace(/^[suFEFFxA0]+|[suFEFFxA0]+$/g, '');
	// uFEFF 바이트 순서 표시; xA0은 공백을 래핑하지 않습니다. };
	}
	inputs.year.onblur = 함수() {
	this.value = this.value.trim();
	checkYear(this);
	};
	inputs.month.onblur = 함수() {
	this.value = this.value.trim();
	checkMonth(this);
	};
	
	
	

RegExp 클래스의 test() 메소드는

정규 표현식이 지정된 문자열과 일치하는지 여부를 감지합니다.

일치에 성공하면 test() 메서드의 반환 값은 true이고, 그렇지 않으면 false를 반환합니다.

일반 개체의 패턴 수정자 검색

RegExp 클래스에는 현재 일반 개체에서 사용하는 패턴 수정자를 검색하고 다음 일치 항목의 시작 인덱스를 지정하는 데 사용되는 일부 속성도 있습니다.

독자가 이러한 속성의 사용을 더 잘 이해할 수 있도록 다음에서는 공백 일치를 예로 들어 설명합니다.

String 클래스의 search() 메서드는

지정된 패턴의 하위 문자열이 문자열에서 처음 나타나는 위치를 반환할 수 있습니다. 이는 indexOf() 메서드보다 강력합니다.

• search() 메소드의 매개변수는 정규식 개체입니다. 비정규식 개체가 전달되면 "new RegExp(전달된 매개변수)"를 사용하여 암시적으로 정규식 개체로 변환됩니다.
• 일치 실패 후 search() 메서드의 반환 값은 -1입니다.

분할() 메서드 : 지정된 구분 기호를 기준으로 문자열을 문자열 배열로 분할하는 데 사용됩니다. 분할 문자열 배열에는 구분 기호가 포함되지 않습니다.

구분 기호가 두 개 이상인 경우 문자열 분할 작업을 완료하려면 일반 개체를 정의해야 합니다.

• 문자열의 "@" 및 "." 구분 기호에 따라 분할됩니다.
• Split() 메소드의 매개변수는 정규식 모드에서 설정한 구분자이며, 반환값은 배열 형태로 저장된 분할 결과이다.

있으면

Split() 메서드는 빈 문자열을 포함하는 배열 "[""]"를 반환합니다. 문자열과 구분 기호가 모두 빈 문자열인 경우 빈 배열 "[]이 반환됩니다. ".

• 정규 일치를 사용하여 문자열을 분할하는 경우 문자열 분할 횟수를 지정할 수도 있습니다.
• 문자열 분할 개수를 지정한 후, 지정된 개수가 실제 문자열의 규칙을 만족하는 분할 개수보다 작을 경우 최종 반환 결과에서 다른 분할 결과는 무시됩니다.

직접

비밀번호 강도 확인

비밀번호 강도 확인 조건:

① 길이 <6자리, 비밀번호 강도 없음.

② 길이가 6자 이상이고 숫자, 문자 또는 기타 문자 중 하나를 포함하고 비밀번호 강도가 "낮음"입니다.

③길이는 6자 이상이고 두 가지 유형의 숫자, 문자 또는 기타 문자를 포함합니다. 비밀번호 강도는 "중간"입니다.

④ 길이가 6자 이상이고 숫자, 문자, 기타 문자가 3가지 이상 포함된 경우 비밀번호 강도는 "높음"입니다.

문자 한정자

문자 한정자 - 한정자는

질문을 합니다. 연속된 문자(예: 6개의 연속 숫자 "458925")와 일치합니다.

해결 방법 1: 일반 객체/dddddd/gi.

문제: 반복되는 "d"는 읽기도 쉽지 않고 쓰기도 번거롭습니다.

해결 방법 2: 한정자(?, +, *, { })를 사용하여 특정 문자의 연속 발생 일치를 완료합니다. 일반 객체/d{6}/gi.

문자 한정 - 탐욕적 및 지연 일치

점 문자(.)를 한정자와 함께 사용하면 지정된 숫자 범위의 모든 문자와 일치할 수 있습니다.

• 예: "^hello.*world$".
• 설명: hello에서 시작하여 world로 끝나는 문자열과 일치할 수 있으며, 그 사이에 0개 이상의 임의 문자가 포함되어 있습니다.

정규식은 지정된 범위 내의 문자를 일치시킬 때 탐욕적 일치와 지연 일치를 지원합니다.

• 소위 욕심쟁이(greedy)는 가능한 한 많은 문자를 일치시키는 것을 의미하고, 게으른(lazy)은 가능한 적은 문자를 일치시키는 것을 의미합니다. 기본적으로 그리디 매칭(Greedy Matching)이 사용됩니다.
• 지연 일치를 달성하려면 이전 한정자 뒤에 "?" 기호를 추가해야 합니다.

대괄호 문자

정규식에서 대괄호 문자 "()"로 묶인 내용을 "하위 표현식"이라고 합니다.

효과

괄호는 catch와 cater의 매칭을 구현하며, 괄호를 사용하지 않으면 catch와 er가 됩니다.

그룹화되지 않은 경우 2개의 c 문자가 일치함을 의미하고, 그룹화한 후에는 2개의 "bc" 문자열이 일치함을 의미합니다.

캡처 및 비캡처

캡처: 하위 표현식과 일치하는 콘텐츠를 시스템 캐시 영역에 저장하는 프로세스입니다.

비캡처: 하위 표현식의 일치하는 내용을 시스템 캐시에 저장하지 말고 (?:x)를 사용하여 이를 달성합니다.

String 객체의 replacement() 메서드는 $n(n은 0보다 큰 양의 정수)을 직접 사용하여 캡처된 콘텐츠를 얻고 하위 표현식으로 캡처된 콘텐츠를 바꾸는 작업을 완료할 수 있습니다.

• 첫 번째 매개변수는 정규식으로, 문자열 문자열을 일치시키고 규칙을 준수하는 내용을 두 번째 매개변수에 설정된 내용으로 바꾸는 데 사용됩니다.
• $2는 reg 정규 표현식의 두 번째 하위 표현식으로 캡처된 콘텐츠 "Capture"를 나타냅니다.
• $1은 첫 번째 하위 표현식에서 캡처한 "일반" 콘텐츠를 나타냅니다.
• 반환 값은 교체 후의 새 문자열이므로 원래 문자열의 내용은 수정되지 않습니다.

비캡처 일치를 달성하려면 "(?:x)"를 사용할 수 있습니다.

역참조 정규식

을 작성할 때 정규식의 캐시 영역에 저장된 하위 표현식의 캡처된 내용을 얻으려면 "n"을 사용할 수 있습니다(n은 0보다 큰 양의 정수입니다. 참조). 프로세스는 "역 참조"입니다.

• "1"은 첫 번째 하위 표현식의 캡처된 내용을 나타냅니다.
• "2"는 두 번째 하위 표현식의 캡처된 내용을 나타냅니다.

• "d"는 0에서 9 사이의 숫자와 일치하는 데 사용됩니다.
• 여기에 괄호 "()"를 추가하면 역참조를 통해 캡쳐된 내용을 얻을 수 있다.
• 따라서 최종 매칭 결과는 333과 666이 됩니다.

너비가 0인 어설션

너비가 0인 어설션 : 너비가 0인 하위 표현식 일치를 나타내며, 하위 표현식과 일치하는 콘텐츠에 특정 문자 집합이 전후에 포함되어 있는지 여부를 찾는 데 사용됩니다.

분류: 순방향 프리페치와 역방향 프리페치로 나뉘는데, JavaScript에서는 순방향 프리페치만 지원됩니다. 즉, 캡처된 콘텐츠가 포함되거나 포함되지 않은 데이터와 일치하는 데이터와 캡처된 콘텐츠가 포함되지 않은 일치 결과입니다.

정규 연산자 우선순위

정규식에는 많은 연산자가 있습니다. 실제 적용에서는 우선순위에 따라 다양한 연산자가 매칭됩니다. 정규식에서 일반적으로 사용되는 연산자의 우선순위는 높은 것부터 낮은 것 순으로 다음과 같습니다.

[사례] ​​콘텐츠 검색 및 교체

코드 구현 아이디어 :

• HTML을 작성하고 두 개의 텍스트 필드를 정의합니다. 하나는 사용자 입력용이고 다른 하나는 필요에 따라 교체된 필터링된 콘텐츠를 표시하기 위한 것입니다.
• 사용자 입력에 잘못된 중국어 문자가 포함되어 있는 경우 *를 사용하여 바꾸십시오.
• 콘텐츠 규칙 찾기 및 바꾸기: /(bad)|[u4e00-u9fa5]/gi.

코드 구현

	
	
	<머리>
	
	
	<스타일>
	p{float:왼쪽;}
	입력{마진:0 20px;}
	
	
	<본문>
	
필터링 전 콘텐츠:

	
	
	
	
필터링된 콘텐츠:

	
	
	<스크립트>
	document.getElementById('btn').onclick = 함수 () {
	// 검색하고 바꿔야 하는 콘텐츠 규칙을 정의합니다. [u4e00-u9fa5]는 모든 중국어 문자와 일치한다는 의미입니다. var reg = /(bad)|[u4e00-u9fa5]/gi;
	var str = document.getElementById('pre').value;
	var newstr = str.replace(reg, '*');
	document.getElementById('res').innerHTML = newstr;
	};
	
	
	

관련 권장사항: JavaScript 학습 튜토리얼

위의 내용은 JavaScript 정규식에 대한 내용으로 충분합니다. 자세한 내용은 PHP 중국어 웹사이트의 다른 관련 기사를 참조하세요.