> 웹 프론트엔드 > JS 튜토리얼 > JS 정규식 사용법에 대한 자세한 소개

JS 정규식 사용법에 대한 자세한 소개

php中世界最好的语言
풀어 주다: 2018-01-08 10:24:46
원래의
1256명이 탐색했습니다.

이번에는 H5를 사용하여 불꽃 입자의 특수 효과를 만드는 방법을 보여 드리겠습니다. H5를 사용하여 특수 효과를 만드는 방법은 무엇입니까? H5에서 불꽃놀이 입자 특수 효과를 만들 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

정규식사용에 대한 자세한 설명

소개

간단히 말하면 정규식은 패턴 일치 및 교체에 사용할 수 있는 강력한 도구입니다. 그 기능은 다음과 같습니다:
문자열에서 특정 패턴을 테스트합니다. 예를 들어, 입력 문자 문자열을 테스트하여 해당 문자열에 전화번호 패턴이나 신용카드 번호 패턴이 있는지 확인할 수 있습니다. 이를 데이터 유효성 검증이라고 합니다.
텍스트를 교체하세요. 정규식을 사용하여 문서의 특정 텍스트를 식별한 다음 완전히 삭제하거나 다른 텍스트로 바꿀 수 있습니다.
패턴 일치를 기반으로 문자열에서 하위 문자열을 추출합니다. 텍스트 또는 입력 필드에서 특정 단어를 찾는 데 사용할 수 있습니다.

기본 문법

정규식의 기능과 효과에 대한 사전 이해를 마친 후, 정규식의 구문 형식을 자세히 살펴보겠습니다.

정규 표현식의 형태는 일반적으로 다음과 같습니다.

/love/"/" 구분 기호 사이의 부분은 대상 개체에서 일치시킬 패턴입니다. 사용자는 "/" 구분 기호 사이에 일치하는 개체를 찾고자 하는 패턴의 내용을 입력하기만 하면 됩니다. 사용자가 패턴 콘텐츠를 보다 유연하게 사용자 정의할 수 있도록 정규식은 특별한 "메타 문자"를 제공합니다. 소위 메타 문자는 정규식에서 특별한 의미를 갖는 특수 문자를 말하며, 대상 객체에서 선행 문자(즉, 메타 문자 앞의 문자)의 모양 패턴을 지정하는 데 사용할 수 있습니다.
더 일반적으로 사용되는 메타 문자로는 "+", "*" 및 "?"가 있습니다.
"+" 메타 문자는 선두 문자가 대상 개체에 연속해서 한 번 이상 나타나야 함을 규정합니다.
"*" 메타 문자는 선행 문자가 대상 개체의 행에 0번 또는 여러 번 나타나야 함을 규정합니다.
"?" 메타 문자는 선행 개체가 대상 개체에 0번 또는 한 번 나타나야 함을 규정합니다.

이제 정규식 메타문자의 구체적인 적용을 살펴보겠습니다.

/fo+/위 정규식에는 "+" 메타 문자가 포함되어 있으므로 대상 개체에서 "fool", "fo" 또는 "football"과 함께 문자 f 뒤에 하나 이상의 문자 o가 연속적으로 나타날 수 있음을 의미합니다. 문자열이 일치합니다.
/eg*/ 위의 정규식에는 "*" 메타 문자가 포함되어 있으므로 대상 개체 g에서 "easy", "ego" 또는 "egg"와 함께 문자 e 뒤에 0개 이상의 문자가 연속적으로 나타날 수 있음을 의미합니다. 문자열이 일치합니다.
/Wil?/위 정규 표현식에는 "?" 메타 문자가 포함되어 있으므로 대상 개체의 "Win" 또는 "Wilson" 등과 일치할 수 있다는 의미입니다. 문자열에 문자 l이 0개 또는 1개 있습니다. 편지 일치 후.

때때로 몇 글자를 일치시켜야 할지 모르겠습니다. 이러한 불확실성을 수용하기 위해 정규식은 한정자 개념을 지원합니다. 이러한 한정자는 일치 항목을 충족하기 위해 정규식의 특정 구성 요소가 발생해야 하는 횟수를 지정합니다.

{n} n은 음수가 아닌 정수입니다. 특정 횟수의 n번 일치합니다. 예를 들어, 'o{2}'는 "Bob"의 'o'와 일치하지 않지만 "food"의 두 o와 일치합니다.
{n,} n은 음수가 아닌 정수입니다. n번 이상 일치합니다. 예를 들어, 'o{2,}'는 "Bob"의 'o'와 일치하지 않지만 "foooood"의 모든 o와 일치합니다. 'o{1,}'는 'o+'와 동일합니다. 'o{0,}'는 'o*'와 동일합니다.
{n,m} m과 n은 모두 음이 아닌 정수입니다. 여기서 n 메타 문자 외에도 사용자는 일치하는 개체에 패턴이 나타나는 빈도를 정확하게 지정할 수 있습니다. 예를 들어, /jim {2,6}/ 위의 정규식은 일치하는 개체에서 문자 m이 2~6번 연속으로 나타날 수 있다고 규정합니다. 따라서 위의 정규식은 jimmy 또는 jimmmmmy와 같은 문자열과 일치할 수 있습니다.

정규식 사용 방법을 미리 이해한 후 몇 가지 다른 중요한 메타 문자를 사용하는 방법을 살펴보겠습니다.
s: 탭 키와 개행 문자를 포함한 단일 공백 ​​문자와 일치하는 데 사용됩니다.
S: 단일 공백 ​​문자를 제외한 모든 문자와 일치하는 데 사용됩니다.
d: 0에서 9까지의 숫자와 일치하는 데 사용됩니다. 문자, 숫자 또는 밑줄 문자와 일치합니다.
W: w와 일치하지 않는 모든 문자와 일치하는 데 사용됩니다.
.: 개행 문자를 제외한 모든 문자와 일치하는 데 사용됩니다.

(참고: s와 S, w와 W는 서로 역연산이라고 생각하면 됩니다.)

이제 위의 메타 문자를 정규식에서 어떻게 사용하는지 예제를 통해 살펴보겠습니다.

/s+/ 위의 정규식은 대상 개체에서 하나 이상의 공백 문자를 일치시키는 데 사용할 수 있습니다.
/d000/ 복잡한 재무제표가 있는 경우 위의 정규식을 통해 총액이 1,000위안인 모든 금액을 쉽게 찾을 수 있습니다.
위에서 소개한 메타 문자 외에도 정규 표현식에는 또 다른 독특한 특수 문자, 즉 로케이터가 있습니다. 로케이터는 대상 개체에서 일치하는 패턴이 나타나는 위치를 지정하는 데 사용됩니다. 보다 일반적으로 사용되는 로케이터에는 "^", "$", "b" 및 "B"가 있습니다.
"^" 위치 지정자는 일치하는 패턴이 대상 문자열의 시작 부분에 나타나야 함을 지정합니다.
"$" 위치 지정자는 일치하는 패턴이 대상 개체의 끝에 나타나야 함을 지정합니다.
"b" 위치 지정자는 일치하는 패턴이 대상 문자열의 끝에 나타나야 함을 지정합니다. 패턴은 대상 문자열의 시작 부분이나 끝의 두 경계 중 하나에 나타나야 합니다. "B" 위치 지정자는 일치하는 개체가 대상 문자열의 시작과 끝 두 경계 내에 위치해야 함을 규정합니다. 일치하는 개체는 대상 문자열의 시작이나 대상으로 사용될 수 없습니다.
마찬가지로 "^", "$", "b", "B"도 서로 역연산되는 두 세트의 로케이터로 간주할 수 있습니다. 예: /^hell/ 위의 정규식에는 "^" 위치 지정자가 포함되어 있으므로 대상 개체에서 "hell", "hello" 또는 "hellhound"로 시작하는 문자열과 일치할 수 있습니다. /ar$/ 위 정규식에는 "$" 위치 지정자가 포함되어 있으므로 대상 개체에서 "car", "bar" 또는 "ar"로 끝나는 문자열과 일치할 수 있습니다. /bbom/ 위 정규식 패턴은 "b" 위치 지정자로 시작하므로 대상 개체에서 "bomb" 또는 "bom"으로 시작하는 문자열과 일치할 수 있습니다. /manb/ 위 정규식 패턴은 "b" 위치 지정자로 끝나기 때문에 "human", "woman" 또는 "man"으로 끝나는 대상 개체의 문자열과 일치할 수 있습니다.
사용자가 일치 패턴을 보다 유연하게 설정할 수 있도록 정규식을 사용하면 특정 문자에 제한되지 않고 일치 패턴에서 특정 범위를 지정할 수 있습니다. 예:
/[A-Z]/ 위의 정규식은 A에서 Z까지 범위의 모든 대문자와 일치합니다.
/[a-z]/위의 정규 표현식은 a에서 z까지의 모든 소문자와 일치합니다.
/[0-9]/ 위 정규 표현식은 0에서 9 사이의 숫자와 일치합니다.
/([a-z][A-Z][0-9])+/ 위 정규식은 "aB0" 등과 같이 문자와 숫자로 구성된 모든 문자열과 일치합니다.

여기서 사용자가 주의해야 할 점은 정규식에서 "()"를 사용하여 문자열을 결합할 수 있다는 것입니다. "()" 기호에 포함된 내용은 대상 개체에도 나타나야 합니다. 따라서 위의 정규식은 "abc"의 마지막 문자가 숫자가 아니라 문자이기 때문에 "abc"와 같은 문자열과 일치하지 않습니다.

프로그래밍 로직의 "OR" 연산과 유사한 정규식을 구현하고 일치를 위해 여러 다른 패턴 중 하나를 선택하려는 경우 파이프 문자 "|"를 사용할 수 있습니다. 예: /to|too|2/ 위 정규식은 대상 개체의 "to", "too" 또는 "2"와 일치합니다.

정규식에서 더 일반적으로 사용되는 연산자도 있는데, 바로 부정 연산자 "[^]"입니다. 앞서 소개한 위치자 "^"와는 달리, 부정 문자 "[^]"는 패턴에 지정된 문자열이 대상 개체에 존재할 수 없음을 지정합니다. 예: /[^A-C]/ 위 문자열은 대상 개체의 A, B, C를 제외한 모든 문자와 일치합니다. 일반적으로 "[]" 안에 "^"가 있으면 부정 연산자로 간주하고, "^"가 "[]" 외부에 있거나 "[]"가 없으면 부정 연산자로 간주해야 합니다. 운영자.
마지막으로 사용자가 정규식 패턴에 메타 문자를 추가하고 일치하는 개체를 찾아야 하는 경우 이스케이프 문자 ""를 사용할 수 있습니다. 예: /Th*/ 위의 정규식은 대상 개체의 "The" 대신 "Th*"와 일치합니다.

정규 표현식을 구성한 후에는 수학 표현식처럼 평가할 수 있습니다. 즉, 왼쪽에서 오른쪽으로 우선순위에 따라 평가할 수 있습니다. 우선순위는 다음과 같습니다.

1. 이스케이프 문자

2.(), (?:), (?=), [] 대괄호 및 대괄호

3.*, +, ?, {n}, {n , }, {n,m} 한정자
4.^, $, 모든 메타문자 위치 및 순서
5.|“OR” 연산

사용 예

JavaScript 1.2에는 정규식 일치 작업을 수행하는 데 사용할 수 있는 강력한 RegExp() 개체가 있습니다. test() 메소드는 대상 객체에 일치하는 패턴이 포함되어 있는지 확인하고 그에 따라 true 또는 false를 반환할 수 있습니다.
우리는 JavaScript를 사용하여 다음 스크립트를 작성하여 사용자가 입력한 이메일 주소의 유효성을 확인할 수 있습니다.
정규식 개체
 이 개체에는 정규식 패턴과 패턴 적용 방법을 나타내는 플래그가 포함되어 있습니다.
 구문 1 re = /pattern/[flags]
 구문 2 re = new RegExp("pattern",["flags"])
 Parameters
 re
 필수입니다. 정규식 패턴에 할당할 변수 이름입니다.
 패턴
 필수입니다. 사용할 정규식 패턴입니다. 구문 1을 사용하는 경우 "/" 문자로 패턴을 구분합니다. 구문 2를 사용하는 경우 패턴을 따옴표로 묶습니다.
 Flags
 선택사항. 구문 2를 사용하는 경우 플래그를 따옴표로 묶습니다. 플래그는 조합하여 사용할 수 있으며 다음을 사용할 수 있습니다.
 g(모든 패턴 발생에 대한 전체 텍스트 검색)
 i(대소문자 무시)
 m(여러 줄 검색)

  예

  다음 예는 일반 플래그를 만듭니다. 표현식 패턴 및 관련 플래그 객체(re). 정규 표현식 객체의 사용을 보여줍니다. 이 예에서는 결과 정규식 개체가 match 메서드에 사용됩니다.

function MatchDemo()
  {
  var r, re; // 声明变量。
  var s = "The rain in Spain falls mainly in the plain";
  re = new RegExp("ain","g"); // 创建正则表达式对象。
  r = s.match(re); // 在字符串 s 中查找匹配。
  return(r);
  }
로그인 후 복사

이 사례를 읽으신 후에는 이 방법을 마스터하셨으리라 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요.

관련 읽기:

jQuery가 클릭 드롭다운 상자의 값을 텍스트 상자에 누적시키는 방법

ES6에서 클래스의 정적 메서드 기능은 무엇입니까

구문 및 공통 vue.js 지침 자세한 설명

위 내용은 JS 정규식 사용법에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿