JavaScript의 정규식에 대한 초보자 가이드

JavaScript를 사용하는 사람이라면 누구나 언젠가는 문자열을 다루어야 합니다. 때로는 문자열을 다른 변수에 저장하고 전달하는 경우도 있습니다. 다른 경우에는 이를 검사하여 특정 하위 문자열이 포함되어 있는지 확인해야 합니다.

그러나 일이 항상 쉬운 것은 아닙니다. 때로는 특정 하위 문자열을 찾는 것이 아니라 특정 패턴을 따르는 하위 ​​문자열 집합을 찾는 경우도 있습니다.

문자열에서 "Apples"를 모두 "apples"로 바꿔야 한다고 가정해 보세요. 간단히 theMainString.replace("Apples", "apples")를 사용할 수 있습니다. 좋고 쉽습니다.

이제 "appLes"도 "apples"로 바꿔야 한다고 가정해 보겠습니다. 마찬가지로 "appLES"는 "apples"가 되어야 합니다. 기본적으로 "Apple"의 모든 대소문자 변형은 "apple"로 변경되어야 합니다. 이 경우 간단한 문자열을 인수로 전달하는 것은 더 이상 실용적이거나 효율적이지 않습니다.

여기서 정규 표현식이 사용됩니다. 대소문자를 구분하지 않는 플래그i만 사용하면 됩니다. 이 플래그를 사용하면 원래 문자열에 "Apples", "APPles", "ApPlEs" 또는 "Apples"가 포함되어 있는지 여부는 중요하지 않습니다. 단어의 모든 인스턴스는 "사과"로 대체됩니다.

대소문자를 구분하지 않는 플래그와 마찬가지로 정규식은 이 튜토리얼에서 다룰 다른 많은 기능을 제공합니다.

JavaScript에서 정규식 사용하기

다른 String 메소드 내에서 정규 표현식을 나타내려면 약간 다른 구문을 사용해야 합니다. 따옴표로 묶인 단순한 문자열과 달리 정규식은 슬래시로 묶인 패턴으로 구성됩니다. 정규식에 사용하는 모든 플래그는 두 번째 슬래시 뒤에 추가됩니다.

이전 예제로 돌아가서 정규식과 간단한 문자열을 사용하는 replace() 메서드의 모습은 다음과 같습니다.

으아악

보시다시피 정규 표현식은 두 경우 모두에서 작동합니다. 이제 정규식 내에서 패턴을 구성하는 플래그와 특수 문자에 대해 자세히 알아 보겠습니다.

정규 표현식의 백슬래시

일반 문자 앞에 백슬래시를 추가하면 특수 문자로 변환할 수 있습니다. 마찬가지로 특수 문자 앞에 백슬래시를 추가하여 일반 문자로 변환할 수 있습니다.

예를 들어 d 不是特殊字符。然而， d 用于匹配字符串中的数字字符。同样，D 也不是特殊字符，但 D는 문자열에서 숫자가 아닌 문자를 일치시키는 데 사용됩니다.

숫자 문자에는 0, 1, 2, 3, 4, 5, 6, 7, 8 및 9가 포함됩니다. 정규 표현식에서 d 时，它将匹配以下任何一个九个字符。当您在正则表达式中使用 D를 사용하면 숫자가 아닌 모든 문자와 일치합니다.

아래 예를 보면 상황이 명확해집니다.

으아악

세 번째 경우에는 첫 번째 일치하는 문자만 대체된다는 점에 유의하세요. 플래그를 사용하여 모든 일치 항목을 바꿀 수도 있습니다. 이러한 플래그에 대해서는 나중에 배우겠습니다.

d 和 D처럼 다른 특수 문자 시퀀스도 있습니다.

1. w를 사용하여 문자열의 모든 "단어" 문자를 일치시킬 수 있습니다. 여기서 단어 문자는 A-Z, a-z, 0-9 및 _를 나타냅니다. 따라서 기본적으로 모든 숫자, 모든 소문자와 대문자, 밑줄과 일치합니다.
2. W를 사용하여 문자열에서 단어가 아닌 문자를 일치시킬 수 있습니다. %, $, #, $ 등과 같은 문자와 일치합니다.
3. s 来匹配单个空白字符，其中包括空格、制表符、换页符和换行符。同样，您可以使用 S를 사용하여 공백을 제외한 다른 모든 문자를 일치시킬 수 있습니다.
4. f、n、r、t 和 v를 사용하여 각각 폼 피드, 줄 바꿈, 캐리지 리턴, 가로 탭 및 세로 탭을 나타낼 수도 있습니다.

때때로 단어를 대체 단어로 바꿔야 하는 상황에 직면하게 되지만, 이는 더 큰 단어의 일부가 아닌 경우에만 가능합니다. 예를 들어 다음 문장을 생각해 보세요.

"앱에 파인애플 사진이 많이 올라와 있어요".

이 예에서는 "app"이라는 단어를 "board"로 바꾸려고 합니다. 그러나 간단한 정규식 패턴을 사용하면 "apple"이 "boardle"로 바뀌고 최종 문장은 다음과 같습니다.

"앱에 송판 이미지가 많이 올라와 있어요".

在这种情况下，您可以使用另一个特殊字符序列：\b。这会检查单词边界。单词边界是通过使用任何非单词字符（如空格、“$”、“%”、“#”等）形成的。不过请注意，它还包括重音字符，如“ü”。

"A lot of pineapple images were posted on the app".replace(/app/, "board");
// A lot of pineboardle images were posted on the app

"A lot of pineapple images were posted on the app".replace(/\bapp/, "board");
// A lot of pineapple images were posted on the board

同样，您可以使用 \B 来匹配非单词边界。例如，您可以使用 \B 仅匹配位于另一个单词（如“pineapple”）内的“app”。

匹配模式“n”次

您可以使用 ^ 告诉 JavaScript 仅查看字符串的开头以进行匹配。同样，您可以使用 $ 仅查看字符串末尾的匹配项。

您可以使用 * 来匹配前面的表达式 0 次或多次。例如，/Ap*/ 将匹配 A、Ap、App、Appp强>，等等。

类似地，您可以使用 + 来匹配前面的表达式 1 次或多次。例如，/Ap+/ 将匹配 Ap、App、Appp 等。这次表达式将不会匹配单个 A。

有时，您只想匹配给定模式的特定出现次数。在这种情况下，您应该使用 {n} 字符序列，其中 n 是数字。例如，/Ap{2}/ 将匹配 App，但不匹配 Ap。它还将匹配 Appp 中的前两个“p”，并保持第三个“p”不变。

您可以使用 {n,} 来匹配给定表达式的至少“n”次出现。这意味着 /Ap{2,}/ 将匹配 App，但不匹配 Ap。它还将匹配 Apppp 中的所有“p”，并将它们替换为您的替换字符串。

您还可以使用 {n,m} 指定最小和最大数量，并限制给定表达式应匹配的次数。例如，/Ap{2,4}/ 将匹配 App、Appp 和 Apppp。它还将匹配 Apppppp 中的前四个“p”，并保持其余部分不变。

"Apppppples".replace(/Ap*/, "App");
// Apples

"Ales".replace(/Ap*/, "App");
// Apples

"Appppples".replace(/Ap{2}/, "Add");
// Addppples

"Appppples".replace(/Ap{2,}/, "Add");
// Addles

"Appppples".replace(/Ap{2,4}/, "Add");
// Addples

使用括号来记住匹配

到目前为止，我们只用常量字符串替换了模式。例如，在上一节中，我们使用的替换始终是“Add”。有时，您必须在给定字符串中查找模式匹配，然后将其替换为模式的一部分。

假设您必须在字符串中找到一个包含五个或更多字母的单词，然后在该单词的末尾添加一个“s”。在这种情况下，您将无法使用常量字符串值作为替换，因为最终值取决于匹配模式本身。

"I like Apple".replace(/(\w{5,})/, '$1s');
// I like Apples

"I like Banana".replace(/(\w{5,})/, '$1s');
// I like Bananas

这是一个简单的示例，但您可以使用相同的技术在内存中保留多个匹配模式。完整匹配中的子模式数量将由使用的括号数量决定。

在替换字符串中，第一个子匹配将使用 $1 标识，第二个子匹配将使用 $2 标识，依此类推。这是另一个例子，进一步阐明括号的用法。

"I am looking for John and Jason".replace(/(\w+)\sand\s(\w+)/, '$2 and $1');
// I am looking for Jason and John

将标志与正则表达式结合使用

正如我在简介中提到的，正则表达式的一个更重要的功能是使用特殊标志来修改搜索的执行方式。这些标志是可选的，但您可以使用它们来执行诸如全局搜索或不区分大小写之类的操作。

这些是四个常用的标志，用于更改 JavaScript 搜索或替换字符串的方式。

• g：该标志将执行全局搜索，而不是在第一个匹配后停止。
• i：此标志将执行搜索，而不检查大小写是否完全匹配。例如，在不区分大小写的搜索中，Apple、aPPLe 和 apPLE 的处理方式都是相同的。
• m：该标志将执行多行搜索。
• y：此标志将在 lastIndex 属性指示的索引中查找匹配项。

以下是与标志一起使用的正则表达式的一些示例：

"I ate apples, you ate apples".replace(/apples/, "mangoes");
// "I ate mangoes, you ate apples"

"I ate apples, you ate apples".replace(/apples/g, "mangoes");
// "I ate mangoes, you ate mangoes"

"I ate apples, you ate APPLES".replace(/apples/, "mangoes");
// "I ate mangoes, you ate APPLES"

"I ate apples, you ate APPLES".replace(/apples/gi, "mangoes");
// "I ate mangoes, you ate mangoes"


var stickyRegex = /apples/y;
stickyRegex.lastIndex = 3;
"I ate apples, you ate apples".replace(stickyRegex, "mangoes");
// "I ate apples, you ate apples"

var stickyRegex = /apples/y;
stickyRegex.lastIndex = 6;
"I ate apples, you ate apples".replace(stickyRegex, "mangoes");
// "I ate mangoes, you ate apples"

var stickyRegex = /apples/y;
stickyRegex.lastIndex = 8;
"I ate apples, you ate apples".replace(stickyRegex, "mangoes");
// "I ate apples, you ate apples"

最终想法

本教程的目的是向您介绍 JavaScript 中的正则表达式及其重要性。我们从基础知识开始，然后介绍反斜杠和其他特殊字符。我们还学习了如何检查字符串中的重复模式以及如何记住模式中的部分匹配以便以后使用它们。

最后，我们了解了常用的标志，它们使正则表达式变得更加强大。您可以在 MDN 上的这篇文章中了解有关正则表达式的更多信息。

이 튜토리얼에서 명확히 하고 싶은 내용이 있으면 언제든지 댓글로 알려주시기 바랍니다.

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