Regular expressions are actually very simple

Basic knowledge of

Create regular

1. Literal creation

Use // It is recommended to create a literal package , But it cannot use variables in it

let hd = "houdunren.com";
console.log(/u/.test(hd));//true

2. Use eval Convert to js Syntax to parse variables into regular

let hd = "houdunren.com";
let a = "u";
console.log(eval(`/${
      a}/`).test(hd)); //true

2. objects creating

Use the object method when regularization needs to be created dynamically

let hd = "houdunren.com";
let web = "houdunren";
let reg = new RegExp(web);
console.log(reg.test(hd)); //true

replace Replace

 let a = 'abc'
 console.log(a.replace('a','g')); //gbc
// Regular expression substitution 
 console.log(a.replace(/\w/g,'@')); //@@@

Highlight content according to user input , Support users to input regular expressions

const content = prompt(" Please enter what you want to search for , regular expression ");  // If fill u, You can also write regular \w
  const reg = new RegExp(content, "g");
  let body = document
    .querySelector("#content")
    .innerHTML.replace(reg, str => {
       // The second parameter can be used to variable every consistent 
      return `<span style="color:red">${
      str}</span>`;
    });
  document.body.innerHTML = body;  // All the letters u Turn red , If it's regular \w All letters are red 

Symbol

1. Selector

| This symbol has a table selection modifier , That is to say | Just match one on the left and right .

 let tel = "010-12345678";
   console.log((/(010|020)\-\d{7,8}/).test(tel));

[] This symbol only matches the first symbol , It only matches once

let tel = "010-12345678";
   let reg = /[12345]/
   console.log(tel.match(reg).join());  //1

2. Character escape

If there is such a scene , If we want to find through regular / Symbol , however / It has special meaning in regularity . If written /// This will cause parsing errors , So use escape syntax /\// To match .

const url = "https://www.houdunren.com";
console.log(/https:\/\//.test(url)); //true 

Use RegExp There will be some differences in escape when building regular , The following is the difference between object and literal definition regularity

let price = 12.23;
// In a string  \d  And  d  It's the same , So in  new RegExp  when \d  That is to say  d
console.log("\d" == "d");

// When using an object to define a regular , You can print the string first , The result is that the same definition of literal quantity is right 
console.log("\\d+\\.\\d+");   // \d+\.\d+
let reg = new RegExp("\\d+\\.\\d+");
console.log(reg.test(price)); //true
console.log(/\d+\.\d+/.test(price));  //true

3. Character boundary

Border character	explain
^	Matches the beginning of the string
$	Matches the end of the string , Ignore line breaks

Matching content must be in www Start

const hd = "www.houdunren.com";
console.log(/^www/.test(hd)); //true

Matching content must be in .com end

const hd = "www.houdunren.com";
console.log(/\.com$/.test(hd)); //true

The length of the detected user name is 3~6 position , And can only be letters . If not used ^ And $ Restrictions will not get the right results , Cannot limit the number of digits

let res = this.value.match(/^[a-z]{3,6}$/i);
console.log(res ? " correct " : " Failure ");

Metacharacter

A list of characters

Metacharacters	explain	Example
\d	Match any number	[0-9]
\D	Match any character except numbers	[^0-9]
\w	With any English letter , Numbers or underscores match	[a-zA-Z_]
\W	In addition to the letter , Match any character outside the number or underscore	[^a-zA-Z_]
\s	Match any white space character , Such as space , tabs \t, A newline \n	[\n\f\r\t\v]
\S	Any character except white space matches	[^\n\f\r\t\v]
.	Matches any character except the newline character

Experience with

Match any number

let hd = "houdunren 2010";
console.log(hd.match(/\d/g)); //["2", "0", "1", "0"]
console.log(hd.match(/\d+/g)); //['2010']  If the plus sign matches more than one, you can link the matching ones together 

Match all phone numbers

let hd = `  Zhang San :010-99999999, Li Si :020-88888888 `;

let res = hd.match(/\d{3}-\d{7,8}/g);
console.log(res);

Get all user names

let hd = `  Zhang San :010-99999999, Li Si :020-88888888`;
let res = hd.match(/[^:\d-,]+/g);
console.log(res);

Match any non number

console.log(/\D/.test(2029)); //false

Match alphanumeric underscores

let hd = "[email protected]";
console.log(hd.match(/\w/g)); //["h", "d", "c", "m", "s"]

Match except for the letters , Match any character outside the number or underscore

console.log(/\W/.test("@")); //true

Match matches any white space character

console.log(/\s/.test(" ")); //true
console.log(/\s/.test("\n")); //true

Match any character except white space

let hd = "[email protected]";
console.log(hd.match(/\S/g)); //["2", "0", "1", "0","@"]

If you want to match points, you need to escape

let hd = `[email protected]`;
console.log(/houdunren.com/i.test(hd)); //true
console.log(/houdunren\.com/i.test(hd)); //false

Use . Match any character except newline , There is no match below hdcms.com Because there are line breaks

const url = ` https://www.houdunren.com hdcms.com `;
console.log(url.match(/.+/)[0]);

Use /s As a single line （ Ignore line breaks ） when ,. Can match all

let hd = ` <span> houdunren hdcms </span> `;
let res = hd.match(/<span>.*<\/span>/s);
console.log(res[0]);

Spaces in regular will be treated as ordinary characters

let tel = `010 - 999999`;
console.log(/\d+-\d+/.test(tel)); //false
console.log(/\d+ - \d+/.test(tel)); //true

All characters

have access to [\s\S] or [\d\D] To match all the characters

let hd = ` <span> houdunren hdcms </span> `;
let res = hd.match(/<span>[\s\S]+<\/span>/);
console.log(res[0]);

Pattern decoration

Regular expressions are executed in their default way , But sometimes the default processing method can't meet our needs , So you can use the mode modifier to change the default mode . Can write multiple , Don't distinguish the order

Modifier	explain
i	Case insensitive matching
g	Search all matches globally
m	Treat as multiple lines , Treat line by line
s	Treat as a single line and ignore line breaks , Use . Can match all characters
y	from regexp.lastIndex Begin to match
u	Correctly handle four characters UTF-16 code

i

Will all houdunren.com Unified as lowercase

let hd = "houdunren.com HOUDUNREN.COM";
hd = hd.replace(/houdunren\.com/gi, "houdunren.com");
console.log(hd); //houdunren.com houdunren.com

g

Use g Modifiers can manipulate content globally

let hd = "houdunren";
hd = hd.replace(/u/, "@");
console.log(hd); // [email protected] Not used  g  The modifier is , Only the first one was replaced 

let hd = "houdunren";
hd = hd.replace(/u/g, "@");
console.log(hd); // After using the global modifier, all  u [email protected]@nren

m

Used to treat content as a multi line match , It's mainly about ^ and $ Modification of

The following will be in # Numbers The beginning of the course is resolved into an object structure , Having studied the atomic group mentioned later can make the code simpler

let hd = ` #1 js,200 element  # #2 php,300 element  # #9 houdunren.com #  The backing people  #3 node.js,180 element  # `;
// [{name:'js',price:'200 element '}]
let lessons = hd.match(/^\s*#\d+\s+.+\s+#$/gm).map(v => {
    
  v = v.replace(/\s*#\d+\s*/, "").replace(/\s+#/, "");
  [name, price] = v.split(",");
  return {
     name, price };
});
console.log(lessons);

u

Every character has an attribute , Such as L Attribute representation is a letter ,P It means punctuation , Need to combine u Patterns work . Other attribute abbreviations can be accessed Alias for property (opens new window) Website view .

// Use \p{L} Attributes match letters 
let hd = "houdunren2010. Keep publishing tutorials , come on. ！";
console.log(hd.match(/\p{L}+/u));

// Use \p{P} Attribute matching punctuation 
console.log(hd.match(/\p{P}+/gu));

The characters also have unicode Text system properties Script= The word system , Here's how to use \p{sc=Han} Get Chinese characters han For the Chinese system , For other languages, please check Text language table (opens new window)

let hd = `  Zhang San :010-99999999, Li Si :020-88888888`;
let res = hd.match(/\p{sc=Han}+/gu);
console.log(res);

Use u The mode can correctly handle four character UTF-16 Byte encoding

let str = "𝒳𝒴";
console.table(str.match(/[𝒳𝒴]/)); // The result is random characters "�"

console.table(str.match(/[𝒳𝒴]/u)); // Results the correct  "𝒳"

lastIndex

RegExp object lastIndex Property can return or set the position where the regular expression begins to match

• Must be combined with g Modifier usage
• Yes exec Effective method
• When the match is complete ,lastIndex Will be reset to 0

let hd = ` Backers keep sharing video tutorials , The website of the supporter is  houdunren.com`;
let reg = / The backing people (.{2})/g;
reg.lastIndex = 10; // From the index 10 Begin your search 
console.log(reg.exec(hd).join(''));  // Backer website 
console.log(reg.lastIndex);  //17

y

Let's compare and use y And g Pattern , Use g The pattern will always match the string

let hd = "udunren";
let reg = /u/g;
console.log(reg.exec(hd));
console.log(reg.lastIndex); //3
console.log(reg.exec(hd));
console.log(reg.lastIndex); //3
console.log(reg.exec(hd)); //null
console.log(reg.lastIndex); //0

But use y After the mode, if from lastIndex If you don't succeed in matching at the beginning, you won't continue to match

let hd = "udunren";
let reg = /u/y;
console.log(reg.exec(hd));
console.log(reg.lastIndex); //1
console.log(reg.exec(hd)); //null
console.log(reg.lastIndex); //0

Because use y Patterns can stop matching when they don't match , Match... In the following characters qq It can improve the matching efficiency

let hd = ` The backing people QQ Group :11111111,999999999,88888888  Backers keep sharing video tutorials , The website of the supporter is  houdunren.com`;

let reg = /(\d+),?/y;
reg.lastIndex = 7;
let qq = []
while ((res = reg.exec(hd))) qq.push(res[1])
console.log(qq); //['11111111', '999999999', '88888888']

Atomic table

Match a metacharacter in a group of characters , In regular expressions, we use the metacharacter table to complete , Is to put [] ( square brackets ) in .

Use the syntax

Atomic table	explain
[]	Match only one atom
[^]	Only match " except " Any atom of a character
[0-9]	matching 0-9 Any number
[a-z]	Match lowercase a-z Any letter
[A-Z]	Match uppercase A-Z Any letter

Be careful ： There are some characters in brackets in metacharacters , Only the original intention , There is no other meaning in other rules

Example operation

obtain 0~3 Any number between

const num = "2";
console.log(/[0-3]/.test(num)); //true

matching a~f Any character between

const hd = "e";
console.log(/[a-f]/.test(hd)); //true00

The order is ascending, otherwise an error will be reported

const num = "2";
console.log(/[3-0]/.test(num)); //SyntaxError

The letters should also be in ascending order, otherwise they will also report errors

const hd = "houdunren.com";
console.log(/[f-a]/.test(hd)); //SyntaxError

Get all user names

let hd = `  Zhang San :010-99999999, Li Si :020-88888888`;
let res = hd.match(/[^:\d-,]+/g);
console.log(res);

Some regular characters in the atomic table do not need to be escaped , If escape is ok , It can be understood as in the atomic table . It's the decimal point

let str = "(houdunren.com)+";
console.table(str.match(/[().+]/g));

// There is no problem using escape 
console.table(str.match(/[\(\)\.\+]/g));

have access to [\s\S] or [\d\D] Match to all characters including newline

...
const reg = /[\s\S]+/g;
...

The following is to delete all headings using atomic table knowledge

<body>
  <p> The backing people </p>
  <h1>houdunren.com</h1>
  <h2>hdcms.com</h2>
</body>
<script>
  const body = document.body;
  const reg = /<(h[1-6])>[\s\S]*<\/\1>*/g;  //* yes 0 One or more , Meaning content is empty also delete 
  let content = body.innerHTML.replace(reg, "");
  document.body.innerHTML = content;
</script>

Atomic group

• Metacharacter Group () The parcel

Let's use atomic group matching h1 label , If you want to match h2 Just change the previous atomic group to h2 that will do .

const hd = `<h1>houdunren.com</h1>`;
console.log(/<(h1)>.+<\/\1>/.test(hd)); //true \1 representative （h1）

Basic use

Does not add g Pattern modifier only matches to the first , The matched information contains the following data

Variable	explain
0	The complete content of the match
1,2…	Matched atomic group
index	Position in the original string
input	Original string
groups	Name groups

let hd = "houdunren.com";
console.log(hd.match(/houdun(ren)\.(com)/)); 
//["houdunren.com", "ren", "com", index: 0, input: "houdunren.com", groups: undefined]

Next, use atomic groups to match the title elements

let hd = ` <h1>houdunren</h1> <span> The backing people </span> <h2>hdcms</h2> `;

console.table(hd.match(/<(h[1-6])[\s\S]*<\/\1>/g)); // \1 be equal to (h[1-6])

Next, use atomic groups to match mailboxes

let hd = "[email protected]";
let reg = /^[\w\-][email protected][\w\-]+\.(com|org|cn|cc|net)$/i;
console.dir(hd.match(reg));

If the mailbox is in the following format [email protected] The above rule will be invalid , The following methods need to be defined

let hd = `[email protected]`;
let reg = /^[\w-][email protected]([\w-]+\.)+(org|com|cc|cn)$/;  //([\w-]+\.) Indicates that it can be matched multiple times hd.com.
console.log(hd.match(reg));

Reference group

\n Reference atomic groups when matching , $n Refers to the use of matching group data when replacing . Replace the label with p label

let hd = ` <h1>houdunren</h1> <span> The backing people </span> <h2>hdcms</h2> `;

let reg = /<(h[1-6])>([\s\S]*)<\/\1>/gi;  // \1 Equal to the first bracket (h[1-6])
console.log(hd.replace(reg, `<p>$2</p>`));  // $2 Indicates what the second bracket matches ([\s\S]*)

If you only want groups to participate in matching , You don't want to return to the result to use (?: Handle . The following is an example of getting all domain names

let hd = ` https://www.houdunren.com http://houdunwang.com https://hdcms.com `;
let arr = []
let reg = /https?:\/\/((?:\w+\.)?\w+\.(?:com|org|cn))/gi; //https?  There are no parentheses outside to indicate s Yes or no 
while ((v = reg.exec(hd))) {
    
  arr.push(v[1])
}
console.log(arr);  //['www.houdunren.com', 'houdunwang.com', 'hdcms.com']

Repeat match

Basic use

If we want to repeatedly match some content, we need to use the repeat match modifier , These include the following , It only affects the first character .

Symbol	explain
*	Repeat zero or more times
+	Repeat one or more times
?	Repeat zero or one time
{n}	repeat n Time
{n,}	repeat n Times or more
{n,m}	repeat n To m Time

By default, the repeat option matches a single character repeatedly , That is not greedy matching

let hd = "hdddd";
console.log(hd.match(/hd+/i)); //hddd

After using atomic groups, repeat matching for the whole group

let hd = "hdddd";
console.log(hd.match(/(hd)+/i)); //hd

The following is the regularity of verifying the flight number

let hd = "010-12345678";
console.log(/0\d{2,3}-\d{7,8}/.exec(hd));

The authentication user name can only be 3~8 A letter or number of digits , And start with a letter

 let state = /^[a-z][\w]{2,7}$/i.test(value);
    console.log(
      state ? " correct ！" : " The user name can only be 3~8 A letter or number of digits , And start with a letter "
    );

The verification password must contain capital letters and be in 5~10 Between bits , Using loops to implement multiple regular verifications

let input = document.querySelector(`[name="password"]`);
input.addEventListener("keyup", e => {
    
  const value = e.target.value.trim();
  const regs = [/^[a-zA-Z0-9]{5,10}$/, /[A-Z]/];
  let state = regs.every(v => v.test(value));  // Using loops to implement multiple regular verifications 
  console.log(state ? " correct ！" : " The password must contain capital letters and be in 5~10 Between bits ");
});

Forbid greed

To prohibit greed is to take the minimum number

The following is a syntax example of prohibiting greed

let str = "aaa";
console.log(str.match(/a+/)); //aaa
console.log(str.match(/a+?/)); //a
console.log(str.match(/a{2,3}?/)); //aa
console.log(str.match(/a{2,}?/)); //aa

Will all span Replace with h4 And painted red , And add The backing people -

<body>
  <main>
    <span>houdunwang</span>
    <span>hdcms.com</span>
    <span>houdunren.com</span>
  </main>
</body>
<script>
  const main = document.querySelector("main");
  const reg = /<span>([\s\S]+?)<\/span>/gi;
  main.innerHTML = main.innerHTML.replace(reg, (v, p1) => {
    
    console.log(p1);
    return `<h4 style="color:red"> The backing people -${
      p1}</h4>`;
  });

The global matching

Here's how to use match Get the label content in the page globally , But the matching details will not be returned

<body>
  <h1>houdunren.com</h1>
  <h2>hdcms.com</h2>
  <h1> The backing people </h1>
</body>

<script>
  function elem(tag) {
    
    const reg = new RegExp("<(" + tag + ")>.+?<\.\\1>", "g");
    return document.body.innerHTML.match(reg);
  }
  console.table(elem("h1"));  //['<h1>houdunwang</h1>', '<h1>houdunren.com</h1>']
</script>

matchAll

Support the use of matchAll operation , And return the iteration object

Need to add g Modifier

let str = "houdunren";
let reg = /[a-z]/ig;
for (const iterator of str.matchAll(reg)) {
    
  console.log(iterator);  // This method can return subscript waiting information 
}

Get tag content

<h1>houdunwang</h1>
    <span>hdcms.com</span>
    <h1>houdunren.com</h1>

let reg = /<(h[1-6])>([\s\S]+?)<\/\1>/gi
  const body = document.body
  const hd = body.innerHTML.matchAll(reg)
  let contents= []
  for (const iterator of hd){
    
    contents.push(iterator[2])
  }
 console.log(contents); // ['houdunwang', 'houdunren.com']

exec

Use g Mode modifier combined exec Loop operation can get results and matching details

<body>
  <h1>houdunren.com</h1>
  <h2>hdcms.com</h2>
  <h1> The backing people </h1>
</body>
<script>
  function search(string, reg) {
    
    const matchs = [];
    while ((data = reg.exec( string))) {
    
      matchs.push(data[2]);
    }
    return matchs;
  }
  console.log(search(document.body.innerHTML, /<(h[1-6])>([\s\S]+?)<\/\1>/gi)); // ['houdunwang', 'houdunren.com']
</script>

Character method

search

search() Method to retrieve the substring specified in the string , You can also use regular expressions to search , The return value is the index position

let str = "houdunren.com";
console.log(str.search("com")); //10  No return found -1

Use regular expression search

console.log(str.search(/\.com/i)); //9  No return found -1

match

Use string search directly

let str = "houdunren.com";
console.log(str.match("com"));

Use regular to get content , Here is a simple search string

let hd = "houdunren";
let res = hd.match(/u/);
console.log(res);
console.log(res[0]); // Matching results  u
console.log(res['index']); // Position of appearance  2

If you use g When it comes to embellishments , There will be no details of the results （ have access to exec perhaps matchAll）

split

Used to separate strings using strings or regular expressions , Here are the dates separated by strings

let str = "2023-02-12";
console.log(str.split("-")); //["2023", "02", "12"]

If the connector of the date is uncertain , Then use regular operation

let str = "2023/02-12";
console.log(str.split(/-|\//));  //["2023", "02", "12"]

replace

replace Method can not only perform basic character replacement , Regular substitution is also possible , Now replace the date connector

let str = "2023/02/12";
console.log(str.replace(/\//g, "-")); //2023-02-12

The replacement string can be inserted into the following special variable name ：

Variable	explain
$$	Insert a “$”.
$&	Insert matching substring .
$`	Insert the content to the left of the current matching substring .
$'	Insert the content to the right of the current matching substring .
$n	If the first parameter is RegExp object , also n It's less than 100 Non-negative integer , Then insert the second n String with brackets matching . Tips ： The index is from 1 Start

Add three before and after the backers =

let hd = "= The backing people =";
console.log(hd.replace(/ The backing people /g, "$`$`$&$'$'")); //=== The backing people ===

Use the telephone number - Connect

let hd = "[phone] (020)8888888";
console.log(hd.replace(/\((\d{3,4})\)(\d{7,8})/g, "$1-$2"));  //010-99999999 020-8888888

Put all the education Chinese characters with links https://www.houdunren.com

<body>
   Online education is an efficient way of learning , Education is a lifelong career 
</body>
<script>
  const body = document.body;
  body.innerHTML = body.innerHTML.replace(
    / education /g,
    `<a href="https://www.houdunren.com">$&</a>`
  );
</script>

Add https , And complete it www.

<body>
  <main>
    <a style="color:red" href="http://www.hdcms.com">
       Open source system 
    </a>
    <a id="l1" href="http://houdunren.com"> The backing people </a>
    <a href="http://yahoo.com"> Yahoo </a>
    <h4>http://www.hdcms.com</h4>
  </main>
</body>
<script>
  const main = document.querySelector("body main");
  const reg = /(<a.*href=['"])(http)(:\/\/)(www\.)?(hdcms|houdunren)/gi;
  main.innerHTML = main.innerHTML.replace(reg, (v, ...args) => {
    
    args[1] += "s";
    args[3] = args[3] || "www.";
    return args.splice(0, 5).join(""); // Intercept the index 0 To 5 The values of are spliced into addresses 
  });
</script>

The regular way

test

Check whether the email entered is legal

<body>
  <input type="text" name="email" />
</body>

<script>
  let email = document.querySelector(`[name="email"]`);
  email.addEventListener("keyup", e => {
    
    console.log(/^\[email protected]\w+\.\w+$/.test(e.target.value));
  });
</script>

exec

Count the number of backing people in the content

<body>
  <div class="content">
     Backers keep sharing video tutorials , The website of the supporter is  houdunren.com
  </div>
</body>

<script>
  let content = document.querySelector(".content");
  let reg = /(?<tag> backing ) people /g;
  let num = 0;
  while ((result = reg.exec(content.innerHTML))) {
    
    num++;
  }
  console.log(` There are supporters ${
      num} Time `);
</script>

Assertion matching

Although the assertion is written in the extension, it is not a group , So it will not be saved in the matching results , Assertions can be understood as conditions in regularity .

(?<=exp)

Zero width look ahead assertion ?=exp Match followed by exp The content of

The back is course The backing of Chinese characters plus links

<script>
  let lessons = ` js,200 element ,300 Time  php,300.00 element ,100 Time  node.js,180 element ,260 Time  `;
  let reg = /(\d+)(.00)?(?= element )/gi;  // Then there is yuan 
  lessons = lessons.replace(reg, (v, ...args) => {
    
    args[1] = args[1] || ".00";
    return args.splice(0, 2).join("");
  });
  console.log(lessons);
</script>

(?<=exp)

Zero width after line assertion ?<=exp Match with exp The content of

In front of the match is houdunren The number of

let hd = "houdunren789hdcms666";
let reg = /(?<=houdunren)\d+/i;
console.log(hd.match(reg)); //789

Replace all hyperlinks with houdunren.com

<body>
  <a href="https://baidu.com"> Baidu </a>
  <a href="https://yahoo.com"> Yahoo </a>
</body>
<script>
  const body = document.body;
  let reg = /(?<=<a.*href=(['"])).+?(?=\1)/gi;
  // console.log(body.innerHTML.match(reg));
  body.innerHTML = body.innerHTML.replace(reg, "https://houdunren.com");
</script>

Blur the last four digits of the phone

let users = `  Call the army : 12345678901  Support person's phone : [phone] `;

let reg = /(?<=\d{7})\d+\s*/g;
users = users.replace(reg, str => {
    
  return "*".repeat(4);  //repeat(4) repeat 4 Secondary meaning 
});
console.log(users); // Call the army : 1234567**** Support person's phone : [phone]****

(?!exp)

Zero width negative look ahead assertion It can't come back exp Specified content

The following example is that the user name cannot appear Xiang Jun

<body>
  <main>
    <input type="text" name="username" />
  </main>
</body>
<script>
  const input = document.querySelector(`[name="username"]`);
  input.addEventListener("keyup", function() {
    
    const reg = /^(?!.* Xiang Jun .*)[a-z]{5,6}$/i; //?! It means that it cannot appear 
    console.log(this.value.match(reg));
  });
</script>

(?<!exp)

Zero width negative backward assertion There can be no exp Specified content

Put all not in https://oss.houdunren.com Replace the initial static resource with a new URL

<body>
  <main>
    <a href="https://www.houdunren.com/1.jpg">1.jpg</a>
    <a href="https://oss.houdunren.com/2.jpg">2.jpg</a>
    <a href="https://cdn.houdunren.com/2.jpg">3.jpg</a>
    <a href="https://houdunren.com/2.jpg">3.jpg</a>
  </main>
</body>
<script>
  const main = document.querySelector("main");
  const reg = /https:\/\/(\w+)?(?<!oss)\..+?(?=\/)/gi;
  main.innerHTML = main.innerHTML.replace(reg, v => {
    
    console.log(v);
    return "https://oss.houdunren.com";
  });
</script>

Wide negative forward assertion ** It can't come back exp Specified content

The following example is that the user name cannot appear Xiang Jun

<body>
  <main>
    <input type="text" name="username" />
  </main>
</body>
<script>
  const input = document.querySelector(`[name="username"]`);
  input.addEventListener("keyup", function() {
    
    const reg = /^(?!.* Xiang Jun .*)[a-z]{5,6}$/i; //?! It means that it cannot appear 
    console.log(this.value.match(reg));
  });
</script>

(?<!exp)

Zero width negative backward assertion There can be no exp Specified content

Put all not in https://oss.houdunren.com Replace the initial static resource with a new URL

<body>
  <main>
    <a href="https://www.houdunren.com/1.jpg">1.jpg</a>
    <a href="https://oss.houdunren.com/2.jpg">2.jpg</a>
    <a href="https://cdn.houdunren.com/2.jpg">3.jpg</a>
    <a href="https://houdunren.com/2.jpg">3.jpg</a>
  </main>
</body>
<script>
  const main = document.querySelector("main");
  const reg = /https:\/\/(\w+)?(?<!oss)\..+?(?=\/)/gi;
  main.innerHTML = main.innerHTML.replace(reg, v => {
    
    console.log(v);
    return "https://oss.houdunren.com";
  });
</script>