Yesterday, I encountered the problem of matching two regular expressions when doing mergeCSS. It also took a lot of time. Finally, with the help of CE classmates in the CSS Forest Group, I completed these two regular expressions. I specially recorded them and may use them in the future. arrive.
The first one is the problem of matching image paths. The string to be processed is:
The following is the quoted content: |
What I originally wrote was:
The following is the quoted content: |
The result is:
The following is the quoted content: |
As you can see, the result of matching two pictures into one is not what you expected. Change it to lazy matching as follows:
The following is the quoted content: |
The result is:
The following is the quoted content: url(demo.jpg); |
Two pictures were matched, which is the desired result. :)
The second problem is the use of variables in regular expressions. Let’s briefly explain why adding variables can also be a problem. Let’s first look at the description of the RegExp object and the replace() method. The general way of writing Javascript regular expressions is:
The following is the quoted content: |
All content between "/" will be treated as a regular expression, so the variable name will be treated as a string. Without adding "/"? That's OK, but if you don't add "/", you can't specify the matching mode, and you can only match the first one.
The following is the quoted content: A new RegExp object can be generated through the RegExp object, with the specified mode and flags. |
then:
The following is the quoted content:
|
What should be noted here is to use "\" to escape, because
The following is the quoted content: If the argument pattern is a regular expression rather than a string, the RegExp() constructor creates a new RegExp object with the same pattern and flags as the specified RegExp. |
During this process "\" will be converted into "", that is, the above result is:
The following is the quoted content:
|