Thay thế nhóm chụp Regex bằng chữ hoa trong Javascript

Question 1

Tôi muốn biết cách thay thế một nhóm nắm bắt bằng chữ hoa của nó trong JavaScript. Đây là một phiên bản đơn giản của những gì tôi đã thử cho đến nay nhưng không hoạt động:

> a="foobar"
'foobar'
> a.replace( /(f)/, "$1".toUpperCase() )
'foobar'
> a.replace( /(f)/, String.prototype.toUpperCase.apply("$1") )
'foobar'

Bạn có thể giải thích điều gì sai với mã này không?

Question 2

Bạn có thể chuyển một hàm cho replace.

var r = a.replace(/(f)/, function(v) { return v.toUpperCase(); });

Giải trình

a.replace( /(f)/, "$1".toUpperCase())

Trong ví dụ này, bạn chuyển một chuỗi vào hàm thay thế. Vì bạn đang sử dụng cú pháp thay thế đặc biệt ($ N lấy lần chụp thứ N), bạn chỉ đơn giản là đưa ra cùng một giá trị. Thực toUpperCasesự lừa dối vì bạn chỉ tạo chuỗi thay thế viết hoa (Điều này hơi vô nghĩa vì ký tự $và một 1không có chữ hoa nên giá trị trả về sẽ vẫn là "$1") .

a.replace( /(f)/, String.prototype.toUpperCase.apply("$1"))

Tin hay không thì ngữ nghĩa của biểu thức này hoàn toàn giống nhau.

Question 3

Tôi biết tôi đến muộn bữa tiệc nhưng đây là một phương pháp ngắn hơn phù hợp với những nỗ lực ban đầu của bạn.

a.replace('f', String.call.bind(a.toUpperCase));

Vậy bạn đã sai ở đâu và voodoo mới này là gì?

Vấn đề 1

Như đã nêu trước đây, bạn đang cố gắng chuyển các kết quả của một phương thức được gọi làm tham số thứ hai của String.prototype.replace () , thay vào đó, bạn nên chuyển một tham chiếu đến một hàm

Giải pháp 1

Điều đó đủ dễ dàng để giải quyết. Đơn giản chỉ cần loại bỏ các tham số và dấu ngoặc đơn sẽ cung cấp cho chúng ta một tham chiếu hơn là thực thi hàm.

a.replace('f', String.prototype.toUpperCase.apply)

Vấn đề 2

Nếu bạn cố gắng chạy mã ngay bây giờ, bạn sẽ gặp lỗi cho biết rằng undefined không phải là một hàm và do đó không thể được gọi. Điều này là do String.prototype.toUpperCase.apply thực sự là một tham chiếu đến Function.prototype.apply () thông qua kế thừa nguyên mẫu của JavaScript. Vì vậy, những gì chúng tôi đang thực sự làm trông giống như thế này

a.replace('f', Function.prototype.apply)

Đó rõ ràng không phải là những gì chúng tôi đã dự định. Làm thế nào nó biết để chạy Function.prototype.apply () trên String.prototype.toUpperCase () ?

Giải pháp 2

Sử dụng Function.prototype.bind (), chúng ta có thể tạo một bản sao của Function.prototype.call với ngữ cảnh của nó được đặt cụ thể thành String.prototype.toUpperCase. Bây giờ chúng tôi có những thứ sau

a.replace('f', Function.prototype.apply.bind(String.prototype.toUpperCase))

Vấn đề 3

Vấn đề cuối cùng là String.prototype.replace () sẽ truyền một số đối số cho hàm thay thế của nó. Tuy nhiên, Function.prototype.apply () mong muốn tham số thứ hai là một mảng nhưng thay vào đó nhận một chuỗi hoặc số (tùy thuộc vào việc bạn có sử dụng nhóm nắm bắt hay không). Điều này sẽ gây ra lỗi danh sách đối số không hợp lệ.

Giải pháp 3

May mắn thay, chúng ta chỉ có thể thay thế trong Function.prototype.call () (chấp nhận bất kỳ số lượng đối số nào, không có đối số nào có giới hạn kiểu) cho Function.prototype.apply () . Bây giờ chúng tôi đã đến mã làm việc!

a.replace(/f/, Function.prototype.call.bind(String.prototype.toUpperCase))

Bỏ từng byte!

Không ai muốn nhập nguyên mẫu nhiều lần. Thay vào đó, chúng ta sẽ tận dụng thực tế là chúng ta có các đối tượng tham chiếu đến các phương thức giống nhau thông qua kế thừa. Phương thức khởi tạo Chuỗi, là một hàm, kế thừa từ nguyên mẫu của Hàm. Điều này có nghĩa là chúng ta có thể thay thế trong String.call cho Function.prototype.call (thực ra chúng ta có thể sử dụng Date.call để tiết kiệm nhiều byte hơn nhưng ít ngữ nghĩa hơn).

Chúng tôi cũng có thể tận dụng biến 'a' của mình vì nguyên mẫu của nó bao gồm một tham chiếu đến String.prototype.toUpperCase, chúng tôi có thể hoán đổi biến đó với a.toUpperCase. Đó là sự kết hợp của 3 giải pháp ở trên và các biện pháp tiết kiệm byte này là cách chúng tôi lấy mã ở đầu bài đăng này.

Question 4

Bài cũ nhưng đáng để mở rộng câu trả lời @ChaosPandion cho các trường hợp sử dụng khác với RegEx bị hạn chế hơn. Ví dụ: đảm bảo (f)hoặc chụp xung quanh nhóm với một định dạng cụ thể /z(f)oo/:

> a="foobazfoobar"
'foobazfoobar'
> a.replace(/z(f)oo/, function($0,$1) {return $0.replace($1, $1.toUpperCase());})
'foobazFoobar'
// Improve the RegEx so `(f)` will only get replaced when it begins with a dot or new line, etc.

Tôi chỉ muốn làm nổi bật hai tham số của functionviệc tìm kiếm một định dạng cụ thể và thay thế một nhóm chụp trong định dạng có thể.

Question 5

Tại sao chúng ta không chỉ tra cứu định nghĩa ?

Nếu chúng ta viết:

a.replace(/(f)/, x => x.toUpperCase())

chúng tôi cũng có thể chỉ nói:

a.replace('f','F')

Tệ hơn nữa, tôi nghi ngờ rằng không ai nhận ra rằng các ví dụ của họ đã hoạt động chỉ vì họ đã nắm bắt toàn bộ regex bằng dấu ngoặc đơn. Nếu bạn nhìn vào định nghĩa , tham số đầu tiên được truyền cho replacerhàm thực sự là toàn bộ mẫu đã khớp và không phải là mẫu bạn đã chụp bằng dấu ngoặc đơn:

function replacer(match, p1, p2, p3, offset, string)

Nếu bạn muốn sử dụng ký hiệu hàm mũi tên:

a.replace(/xxx(yyy)zzz/, (match, p1) => p1.toUpperCase()

Question 6

GIẢI PHÁP

a.replace(/(f)/,x=>x.toUpperCase())

để thay thế tất cả các lần xuất hiện grup, hãy sử dụng /(f)/gregexp. Vấn đề trong mã của bạn: String.prototype.toUpperCase.apply("$1")và "$1".toUpperCase()đưa ra "$1"(tự mình thử trong bảng điều khiển) - vì vậy nó không thay đổi bất cứ điều gì và trên thực tế, bạn gọi hai lần a.replace( /(f)/, "$1")(cũng không thay đổi gì).

Hiển thị đoạn mã

let a= "foobar";
let b= a.replace(/(f)/,x=>x.toUpperCase());
let c= a.replace(/(o)/g,x=>x.toUpperCase());

console.log("/(f)/ ", b);
console.log("/(o)/g", c);

Mở rộng đoạn mã

Question 7

Đưa ra một từ điển (đối tượng, trong trường hợp này là a Map) thuộc tính, giá trị và cách sử dụng .bind()như được mô tả trong câu trả lời

const regex = /([A-z0-9]+)/;
const dictionary = new Map([["hello", 123]]); 
let str = "hello";
str = str.replace(regex, dictionary.get.bind(dictionary));

console.log(str);

Mở rộng đoạn mã

Sử dụng một đối tượng thuần JavaScript và với một hàm được xác định để trả về giá trị thuộc tính phù hợp của đối tượng hoặc chuỗi gốc nếu không tìm thấy kết quả phù hợp nào

const regex = /([A-z0-9]+)/;
const dictionary = {
  "hello": 123,
  [Symbol("dictionary")](prop) {
    return this[prop] || prop
  }
};
let str = "hello";
str = str.replace(regex, dictionary[Object.getOwnPropertySymbols(dictionary)[0]].bind(dictionary));

console.log(str);

Mở rộng đoạn mã