Home Web Front-end JS Tutorial Illustrations on the concepts and applications of regular expressions in JavaScript

Illustrations on the concepts and applications of regular expressions in JavaScript

Oct 27, 2017 am 09:40 AM
javascript js expression

Today I would like to share with you some knowledge about regular expressions and their application in javascript. Regular expressions are simple but not simple. For example, when my teacher used to teach us, he said that if you get started with this thing, you can master it in 20 to 30 minutes. Once you don't get started, you won't be able to catch up in a few days. So I studied and researched it very seriously at the beginning. Unexpectedly, regular expressions not only simplify the code, but also save front-end engineers a lot of trouble in actual operations. As we all know, when users browse a page, the only thing that interacts with data is the form. Regarding form verification, there are actually many methods. Next, I will share with you two methods. One is an ordinary and cumbersome method. , one is regular expression, let’s see what effect it can bring to the form.

First let’s take a look at the regular version:

I personally feel that the method is too crude. This is a simple form I made when I first started learning. The effect is that no CSS style sheet is added.

Let’s take another look at the upgraded regular expression:

Continue Let’s learn about regular expressions together.

Regular expression is an object that describes a character pattern, also known as regular representation and conventional representation.

Regular expression uses a single string to describe and match a series of A string that conforms to a certain syntax rule. In many text editors, regular expressions are often used to retrieve and replace text that matches a certain pattern. The characteristics of regular expressions are: 1. Very flexible, logical and functional; 2. Complex control of strings can be achieved quickly and in an extremely simple way. 3. It is relatively obscure and difficult to understand for those who are new to it.

Define regular expression 1: Normal way varreg=/expression/additional parameters

reg.test(v.value)

2:

Constructor

methodvar reg=new RegExp("expression","additional parameters) var reg=new RegExp("china");Expression mode 1: simple mode var reg=/china/; 2: Matches the pattern var reg=/^\w+$/; var reg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA- Z]{2,3})?$/;

The method exec of the RegExp object

retrieves the characters that match the regular expression, returns the found value, and determines its position test Retrieve the specified value in the string, return true or false exec method: if no match is found, the return value is null; if a match is found, a result array is returned, /.../ represents the beginning and end of a pattern ^ matching characters The beginning of the string $ matches the end of the string \s Any whitespace character \S Any non-whitespace character \d Matches a numeric character, equivalent to [0-9] \D Any character except digits, equivalent to [^ 0-9] \wmatches a number, underscore, or alphabetical character, equivalent to [A-Za-z0-9_] \Wany non-single-word character, equivalent to [^a-zA-z0-9_]. Except for newlines Any character other than {n} matches the previous item n times {n,} matches the previous item n times, or multiple times {n,m} matches the previous item at least n times, but cannot More than m times * matches the previous item 0 or more times, equivalent to {0,} + matches the previous item 1 or more times, equivalent to {1,}? Matches the previous item 0 or 1 times, That is to say, the previous item is optional and is equivalent to {0,1}

x|y matches x or y. For example, "z|food" can match "z." " or "food". "(z|f)ood" matches "zood" or "food". [xyz] character set. Matches any character contained in it. For example, "[abc]" can match "plain" "a" in. [a-z]

Character range

. Matches any character in the specified range. For example, "[a-z]" can match any lowercase alphabetic character in the range "a" to "z". Note: Only when the hyphen is inside the character group and appears between two characters, it can represent the range of characters; if it appears at the beginning of the character group, it can only represent the hyphen itself. (pattern) Match pattern and get this A match. The obtained matches can be obtained from the generated Matches collection, using the SubMatches collection in VBScript and using the $0...$9 attributes in JScript. To match parentheses characters, use "\(" or "\)".

The above is the detailed content of Illustrations on the concepts and applications of regular expressions in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1671
14
PHP Tutorial
1276
29
C# Tutorial
1256
24
Recommended: Excellent JS open source face detection and recognition project Recommended: Excellent JS open source face detection and recognition project Apr 03, 2024 am 11:55 AM

Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages ​​and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side

How to implement an online speech recognition system using WebSocket and JavaScript How to implement an online speech recognition system using WebSocket and JavaScript Dec 17, 2023 pm 02:54 PM

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Dec 17, 2023 pm 06:55 PM

Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price

How to use JavaScript and WebSocket to implement a real-time online ordering system How to use JavaScript and WebSocket to implement a real-time online ordering system Dec 17, 2023 pm 12:09 PM

Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order

JavaScript and WebSocket: Building an efficient real-time weather forecasting system JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts Dec 18, 2023 pm 03:39 PM

With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

See all articles