VUE3.0을 빠르게 시작하는 방법: 학습 입력
관련 권장 사항: JavaScript 자습서
정규 표현식 ( 정규 표현식, regexp라고 함 )
적용: 프로젝트 개발 시 휴대폰 번호의 특정 숫자 숨기기, 데이터 수집, 민감한 단어 필터링, 양식 확인 등의 기능을 모두 정규식을 사용하여 구현할 수 있습니다.
적용분야 : 운영체제(Unix, Linux 등), 프로그래밍 언어(C, C++, Java, PHP, Python, JavaScript 등).
예: 텍스트 검색을 예로 들어 보겠습니다. 대량의 텍스트에서 특정 기능(예: 휴대폰 번호)과 일치하는 문자열을 찾은 경우 정규 표현식의 구문에 따라 이 기능을 작성하여 컴퓨터 프로그램이 인식한 패턴( 패턴)을 사용하면 컴퓨터 프로그램이 이 패턴에 따라 텍스트를 일치시켜 규칙에 맞는 문자열을 찾습니다.
정규식의 역사 
정규식의 표현 형태
개발 중에는 정규 일치 패턴을 기반으로 지정된 문자열을 검색하고 일치시켜야 하는 경우가 많습니다.
문자열에서 지정된 값을 검색하는 것 외에도 String 객체의 match() 메소드는 일반 규칙에 따라 대상 문자열의 요구 사항을 충족하는 모든 내용을 일치시키고 이를 다음 배열에 저장할 수도 있습니다. 일치가 성공하면 일치가 실패하면 false를 반환합니다.
JavaScript 애플리케이션에서는 정규식을 사용하기 전에 먼저 일반 객체를 생성해야 합니다. 앞에서 설명한 리터럴 생성 외에도 RegExp 개체의 생성자를 통해 생성할 수도 있습니다.
독자들이 일반 객체 획득에 대해 더 잘 이해할 수 있도록 특수 문자 "^", "$", "*", "." 및 ""를 매칭하여 비교 설명합니다.
생성자 메서드와 리터럴 메서드로 생성된 일반 개체는 기능 면에서는 완전히 동일하지만 구문 구현에서는 특정 차이점이 있습니다. 전자 패턴은 사용할 때 백슬래시()를 이스케이프해야 합니다
.
후자의 패턴을 작성할 때는 구분자 "/" 안에 배치해야 하며, 플래그 태그는 종료 구분자 외부에 배치해야 합니다.
: 문자 카테고리를 효과적으로 사용하면 정규식을 더 간결하고 읽기 쉽게 만들 수 있습니다.
예시 1: 대문자, 소문자, 숫자는 "w"를 사용하여 직접 표현할 수 있습니다.
사례 2: 0에서 9 사이의 숫자를 일치시키려면 "d"를 사용할 수 있습니다.
문자 카테고리 사용에 대한 독자의 이해를 돕기 위해 다음에서는 "." 및 "s"를 예시로 사용합니다.
문자 집합 표현: "[]"는 문자 집합을 구현할 수 있습니다.
문자 범위: 하이픈 "-"과 함께 사용하면 지정된 범위 내의 문자를 일치시킨다는 의미입니다.
반의어 문자: 메타 문자 "^"가 "[]"와 함께 사용되는 경우 이를 반의어 문자라고 합니다.
특정 범위 내에 있지 않음: "^"는 "[]"와 함께 사용되어 지정된 문자 범위 내에 없는 문자를 일치시킵니다.
일반적인 사용법을 보여주기 위해 'get好TB6'.match(/pattern/g) 문자열을 예로 들어 보겠습니다.
문자
는 일반적으로 일반 문자만 나타내며
문자 범위를 나타낼 때 메타 문자로만 사용됩니다. "-" 하이픈으로 표시되는 범위는 문자 인코딩 순서를 따릅니다. 예를 들어 "aZ", "za" 및 "a-9"는 모두 잘못된 범위입니다.
[사례] 입력 콘텐츠 제한
코드 구현 아이디어 :
HTML을 작성하고 연도(년)와 월(월)에 대한 텍스트 상자와 쿼리 버튼을 설정합니다.
작업의 요소 개체를 가져오고 양식 제출을 확인합니다.
연도를 확인하세요. 정규 형식은 /^d{4}/입니다. 월을 확인합니다. 일반 규칙: / ( ( 0 ? [ 1 − 9 ] ) ∣ ( 1 [ 012 ] ) ) /.
텍스트 상자에 초점이 맞춰지고 프롬프트 상자의 색상이 제거됩니다. 텍스트 상자는 포커스를 잃고 입력 내용 양쪽 끝의 공백을 제거한 후 유효성을 검사합니다.
코드 구현
<!DOCTYPE HTML>
<html>
<머리>
<meta charset="UTF-8">
<title>입력 콘텐츠 제한</title>
<스타일>
입력[유형=텍스트]{너비: 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 더 }
</style>
</head>
<본문>
<양식 id="양식">
연도<input type="text" name="연도">
월<input type="text" name="월">
<입력 유형="제출" 값="쿼리">
</form>
<p id="결과"></p>
<스크립트>
함수 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'); // <form> 요소 객체 var result = document.getElementById('result'); // <p> 요소 객체 var inputs = document.getElementsByTagName('input'); // <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);
};
</script>
</body>
</html> 정규 표현식이 지정된 문자열과 일치하는지 여부를 감지합니다.
일치에 성공하면 test() 메서드의 반환 값은 true이고, 그렇지 않으면 false를 반환합니다.
일반 개체의 패턴 수정자 검색
RegExp 클래스에는 현재 일반 개체에서 사용하는 패턴 수정자를 검색하고 다음 일치 항목의 시작 인덱스를 지정하는 데 사용되는 일부 속성도 있습니다.
독자가 이러한 속성의 사용을 더 잘 이해할 수 있도록 다음에서는 공백 일치를 예로 들어 설명합니다.
지정된 패턴의 하위 문자열이 문자열에서 처음 나타나는 위치를 반환할 수 있습니다. 이는 indexOf() 메서드보다 강력합니다.
분할() 메서드 : 지정된 구분 기호를 기준으로 문자열을 문자열 배열로 분할하는 데 사용됩니다. 분할 문자열 배열에는 구분 기호가 포함되지 않습니다.
구분 기호가 두 개 이상인 경우 문자열 분할 작업을 완료하려면 일반 개체를 정의해야 합니다.
있으면
Split() 메서드는 빈 문자열을 포함하는 배열 "[""]"를 반환합니다. 문자열과 구분 기호가 모두 빈 문자열인 경우 빈 배열 "[]이 반환됩니다. ".
직접
비밀번호 강도 확인
비밀번호 강도 확인 조건:
① 길이 <6자리, 비밀번호 강도 없음.
② 길이가 6자 이상이고 숫자, 문자 또는 기타 문자 중 하나를 포함하고 비밀번호 강도가 "낮음"입니다.
③길이는 6자 이상이고 두 가지 유형의 숫자, 문자 또는 기타 문자를 포함합니다. 비밀번호 강도는 "중간"입니다.
④ 길이가 6자 이상이고 숫자, 문자, 기타 문자가 3가지 이상 포함된 경우 비밀번호 강도는 "높음"입니다.
질문을 합니다. 연속된 문자(예: 6개의 연속 숫자 "458925")와 일치합니다.
해결 방법 1: 일반 객체/dddddd/gi.
문제: 반복되는 "d"는 읽기도 쉽지 않고 쓰기도 번거롭습니다.
해결 방법 2: 한정자(?, +, *, { })를 사용하여 특정 문자의 연속 발생 일치를 완료합니다. 일반 객체/d{6}/gi.
점 문자(.)를 한정자와 함께 사용하면 지정된 숫자 범위의 모든 문자와 일치할 수 있습니다.
정규식은 지정된 범위 내의 문자를 일치시킬 때 탐욕적 일치와 지연 일치를 지원합니다.
정규식에서 대괄호 문자 "()"로 묶인 내용을 "하위 표현식"이라고 합니다.
괄호는 catch와 cater의 매칭을 구현하며, 괄호를 사용하지 않으면 catch와 er가 됩니다. 
그룹화되지 않은 경우 2개의 c 문자가 일치함을 의미하고, 그룹화한 후에는 2개의 "bc" 문자열이 일치함을 의미합니다.
캡처: 하위 표현식과 일치하는 콘텐츠를 시스템 캐시 영역에 저장하는 프로세스입니다.
비캡처: 하위 표현식의 일치하는 내용을 시스템 캐시에 저장하지 말고 (?:x)를 사용하여 이를 달성합니다.
String 객체의 replacement() 메서드는 $n(n은 0보다 큰 양의 정수)을 직접 사용하여 캡처된 콘텐츠를 얻고 하위 표현식으로 캡처된 콘텐츠를 바꾸는 작업을 완료할 수 있습니다.
비캡처 일치를 달성하려면 "(?:x)"를 사용할 수 있습니다.
을 작성할 때 정규식의 캐시 영역에 저장된 하위 표현식의 캡처된 내용을 얻으려면 "n"을 사용할 수 있습니다(n은 0보다 큰 양의 정수입니다. 참조). 프로세스는 "역 참조"입니다.
너비가 0인 어설션 : 너비가 0인 하위 표현식 일치를 나타내며, 하위 표현식과 일치하는 콘텐츠에 특정 문자 집합이 전후에 포함되어 있는지 여부를 찾는 데 사용됩니다.
분류: 순방향 프리페치와 역방향 프리페치로 나뉘는데, JavaScript에서는 순방향 프리페치만 지원됩니다. 즉, 캡처된 콘텐츠가 포함되거나 포함되지 않은 데이터와 일치하는 데이터와 캡처된 콘텐츠가 포함되지 않은 일치 결과입니다.
정규식에는 많은 연산자가 있습니다. 실제 적용에서는 우선순위에 따라 다양한 연산자가 매칭됩니다. 정규식에서 일반적으로 사용되는 연산자의 우선순위는 높은 것부터 낮은 것 순으로 다음과 같습니다.
[사례] 콘텐츠 검색 및 교체
코드 구현 아이디어 :
코드 구현
<!DOCTYPE HTML>
<html>
<머리>
<meta charset="UTF-8">
<title>콘텐츠 검색 및 교체</title>
<스타일>
p{float:왼쪽;}
입력{마진:0 20px;}
</style>
</head>
<본문>
<p>필터링 전 콘텐츠:<br>
<textarea id="pre"rows="10" cols="40"></textarea>
<input id="btn" type="button" value="filter">
</p>
<p>필터링된 콘텐츠:<br>
<textarea id="res"row="10" cols="40"></textarea>
</p>
<스크립트>
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;
};
</script>
</body>
</html> 관련 권장사항: JavaScript 학습 튜토리얼
위의 내용은 JavaScript 정규식에 대한 내용으로 충분합니다. 자세한 내용은 PHP 중국어 웹사이트의 다른 관련 기사를 참조하세요.
