JavaScript Regex Replace – biểu thức chính quy thay thế javascript

Bạn đang xem : biểu thức chính quy thay thế javascript

Tóm tắt : trong hướng dẫn này, bạn sẽ học cách sử dụng phương thức string Replace () để trả về một chuỗi mới với một số hoặc tất cả các kết quả phù hợp của một biểu thức chính quy được thay thế bằng một chuỗi thay thế.

Giới thiệu về phương thức Replace () trong JavaScript

Phương thức String.prototype.replace () hoạt động với cả hai chuỗi cụm từ thông dụng . Hướng dẫn này chỉ tập trung vào các cụm từ thông dụng.

Phần sau trình bày cú pháp của phương thức Replace () :

 

Replace (regexp, newSubstr)

Trong cú pháp này:

  • regexp là một biểu thức chính quy cần đối sánh.
  • newSubstr là một chuỗi để thay thế các kết quả phù hợp. Nếu newSubstr trống, phương thức Replace () sẽ xóa các kết quả phù hợp.

Replace () trả về một chuỗi mới với các kết quả phù hợp được thay thế bằng newSubstr . Lưu ý rằng phương thức Replace () không thay đổi chuỗi ban đầu nhưng trả về một chuỗi mới.

Theo mặc định, phương thức Replace () sẽ thay thế kết quả đầu tiên nếu regexp không sử dụng cờ chung ( g ). Để thay thế tất cả các kết quả phù hợp, bạn sử dụng cờ chung ( g ) trong regexp .

Ví dụ về phương thức regex Replace () trong JavaScript

Hãy lấy một số ví dụ về việc sử dụng phương thức Replace () .

1) Ví dụ về phương thức JavaScript regex Replace () đơn giản

Ví dụ sau sử dụng phương thức Replace () để thay thế đối sánh đầu tiên của chuỗi JS với chuỗi JavaScript :

 

const

s =

'JS và js'

;

const

re =

/ js / i

;

const

newS = s.replace (re,

'JavaScript'

);

console

.log (newS);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Đầu ra:

 

JavaScript và js < / p>

/ js / i khớp với cả JS js trong 'JS và js ' chuỗi. Tuy nhiên, phương thức Replace () chỉ thay thế kết quả phù hợp đầu tiên ( JS ).

Để thay thế tất cả các kết quả phù hợp, bạn sử dụng cờ chung ( g ) trong biểu thức chính quy.

2) Sử dụng JavaScript regex phương thức Replace () với cờ toàn cục

Ví dụ sau sử dụng phương thức Replace () với một biểu thức chính quy có chứa cờ toàn cục ( g ) để thay thế tất cả các kết quả phù hợp:

 

const

s =

'JS và js'

;

const

re =

/ js / gi

;

const

newS = s.replace (re,

'JavaScript'

);

bảng điều khiển

.log (newS);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Đầu ra:

 

JavaScript và JavaScript

3) Sử dụng phương thức JavaScript regex Replace () với các nhóm thu thập

Khi một biểu thức chính quy có chứa các nhóm thu thập , bạn có thể tham chiếu các nhóm này trong newSubstr bằng cú pháp $ N trong đó N là số nhóm. Ví dụ: $ 1 và $ 2 tham chiếu nhóm thu thập thứ nhất và thứ hai.

Ví dụ sau minh họa cách sử dụng phương thức Replace () với các nhóm thu thập để hoán đổi họ và tên trong tên người:

 

let

lại =

/ (\ w +) \ s (\ w +) /

;

let

name =

'Jane Doe'

;

let

lastFirst = name.replace (re,

'$ 2, $ 1'

);

bảng điều khiển

.log (lastFirst);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Đầu ra:

 

Doe, Jane

Cách hoạt động.

Biểu thức chính quy / (\ w +) \ s (\ w +) / đối sánh với một hoặc nhiều ký tự từ, một dấu cách và sau đó là một hoặc nhiều ký tự từ. Nói cách khác, nó khớp với bất kỳ chuỗi nào có một từ, khoảng trắng và một từ khác.

Biểu thức chính quy chứa hai nhóm thu thập. Nhóm thu thập đầu tiên ghi lại từ đầu tiên và nhóm thứ hai ghi lại từ thứ hai sau dấu cách.

Trong newSubstr , chúng tôi sử dụng $ 1 để tham chiếu nhóm chụp đầu tiên và $ 2 để tham chiếu nhóm thứ hai. Để hoán đổi tên và họ, chúng tôi đặt kết quả phù hợp thứ hai ( $ 2 ) trước rồi đến kết quả phù hợp đầu tiên ( $ 1 ).

Phương thức JavaScript regex Replace () với hàm thay thế

Đối số thứ hai của phương thức Replace () có thể là một chức năng như thế này:

 

Replace (regexp, ReplaceerFunction)

< p> Phương thức Replace () gọi ReplaceerFunction sau khi nó tìm thấy kết quả phù hợp đầu tiên. ReplaceerFunction được sử dụng để tạo chuỗi con thay thế kết hợp.

Nếu regexp sử dụng cờ chung ( g ), phương thức Replace () sẽ gọi ReplaceerFunction sau mỗi trận đấu.

ReplaceerFunction có các đối số sau:

  • match chỉ định chuỗi con phù hợp.
  • p1 , p2 ,… the giá trị của các nhóm thu thập trong regexp.
  • offset là một số nguyên chỉ định độ lệch của chuỗi con phù hợp trong chuỗi đầu vào.
  • string là chuỗi đầu vào.
  • groups là một đối tượng có nhóm thu thập được đặt tên và các giá trị là các giá trị khớp.

< p> Hãy lấy một ví dụ về việc sử dụng phương thức Replace () với một hàm thay thế.

Giả sử bạn có một chuỗi như sau:

 

backgroundColor

Còn bạn muốn chuyển đổi nó thành một cái gì đó như:

 

background-color

Để làm điều đó, bạn có thể sử dụng phương thức Replace () với một hàm thay thế.

Đầu tiên, hãy tạo một biểu thức chính quy khớp với một chữ cái viết hoa:

< pre class = "wp-block-code">

/ [A-Z] / g

Thứ hai, xác định một hàm thay thế:

 

function

thay thế

(

match, offset

)

{

return

(offset & gt;

0

?

'-' :

''

) + match.toLowerCase (); }

Ngôn ngữ mã:

JavaScript

(

javascript

)

Replaceer () Hàm thêm dấu gạch ngang nếu chữ cái phù hợp không ở đầu chuỗi và nối dấu gạch nối với chữ cái phù hợp được chuyển đổi thành chữ thường.

Thứ ba, sử dụng Replace () < / code> để thay thế kết quả khớp với chuỗi con được trả về từ hàm Replaceer () :

 

function

addHyphen

(

prop

)

{

return

prop.replace (

/ [A-Z] / g

, người thay thế); }

Ngôn ngữ mã:

JavaScript

(

javascript

)

Đoạn mã sau đây hiển thị toàn bộ mã:

 

function

thay thế

(

match, offset

)

{

return

(offset & gt;

0

?

'-' :

''

) + match.toLowerCase (); }

function

addHyphen

(

prop

) {

return

prop.replace (

/ [A-Z] / g

, người thay thế); }

const

prop =

'backgroundColor'

;

console

.log (addHyphen (prop));

Ngôn ngữ mã:

JavaScript

(

javascript

)

Đầu ra:

 

background-color

Để làm cho mã ngắn gọn hơn, bạn có thể sử dụng < span> các hàm mũi tên với hàm thay thế dưới dạng hàm gọi lại như thế này:

 

const

addHyphen =

(

prop

) = & gt;

prop.replace (

/ [A-Z] / g

, (khớp, bù) = & gt; (offset & gt;

0

?

'-'

:

''

) + match.toLowerCase () );

const

prop =

'backgroundColor'

;

console

.log (addHyphen (prop));

Ngôn ngữ mã:

JavaScript

(

javascript

)

Tóm tắt

  • Sử dụng phương thức Replace () để tìm các kết quả phù hợp với một biểu thức chính quy và thay thế các kết quả phù hợp bằng một chuỗi con mới.

Hướng dẫn này có hữu ích không?


Xem thêm những thông tin liên quan đến chủ đề biểu thức chính quy thay thế javascript

JavaScript 36: Regular expressions

  • Tác giả: thân triệu
  • Ngày đăng: 2019-06-08
  • Đánh giá: 4 ⭐ ( 2479 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn học lập trình JavaScript từ cơ bản đến nâng cao. Học javascript cho tất cả mọi người. JavaScript regular expressions. thân triệu channel-let's grow together!

    Link tham khảo:
    https://developer.mozilla.org/vi/docs/Web/JavaScript/Guide/Regular_Expressions

    https://www.w3schools.com/js/js_regexp.asp

Biểu thức chính quy trong JavaScript

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 3 ⭐ ( 7953 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Biểu thức chính quy trong JavaScript - Lập Trình Từ Đầu 1 JavaScript Căn Bản

Ví dụ thay thế từ khóa bằng RegEx JavaScript

  • Tác giả: www.daipho.com
  • Đánh giá: 3 ⭐ ( 4050 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Biểu thức chính quy - Regular Expressions được dùng để thực hiện đối sánh mẫu và “tìm kiếm và thay thế” trên văn bản. Ví dụ 1: thay từ khóa (chuỗi con)

Các biểu thức chính quy trong JavaScript

  • Tác giả: freehost.page
  • Đánh giá: 4 ⭐ ( 7916 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Biểu thức chính quy (Regular Expressions) trong JavaScript - Minh Hoàng Blog

  • Tác giả: minhhn.com
  • Đánh giá: 5 ⭐ ( 8823 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Một số biểu thức chính quy RegExp hay

  • Tác giả: completejavascript.com
  • Đánh giá: 4 ⭐ ( 9197 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Biểu thức chính quy RegExp là một chủ đề khá phức tạp. Bài viết này sẽ tổng hợp lại một số biểu thức chính quy RegExp mà mình sưu tầm được.

Toàn tập về biểu thức chính quy RegEx trong Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 4605 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức chính quy (Regular Expression) để xử lý chuỗi nâng cao, đây là phương pháp xử lý chuôi phức.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Làm thế nào để thêm một chú thích web hiển thị với hình ảnh của nó - cách chú thích một hình ảnh trong html