1. String Search Methods.
Các phương thức tìm kiếm chuỗi (String Search Methods) trong JavaScript được sử dụng để tìm kiếm và truy xuất thông tin từ chuỗi.
Các phương thức này rất hữu ích khi bạn cần thực hiện các tác vụ tìm kiếm và so sánh trong chuỗi. Dưới đây là mô tả tóm tắt về chúng:
- String indexOf(): Phương thức này tìm kiếm một chuỗi con trong chuỗi gốc và trả về vị trí (index) của lần xuất hiện đầu tiên của chuỗi con đó. Nếu không tìm thấy, nó trả về -1.
- String lastIndexOf(): Tương tự như
indexOf(), nhưng nó tìm kiếm từ cuối chuỗi và trả về vị trí của lần xuất hiện cuối cùng của chuỗi con. - String search(): Phương thức này tìm kiếm một chuỗi con và trả về vị trí của lần xuất hiện đầu tiên của chuỗi con đó. Nếu không tìm thấy, nó trả về -1. Tuy nhiên, phương thức này cũng hỗ trợ sử dụng biểu thức chính quy (regular expression).
- String match(): Phương thức này tìm kiếm sự khớp của chuỗi với biểu thức chính quy và trả về một mảng các kết quả khớp.
- String includes(): Phương thức này kiểm tra xem một chuỗi con có tồn tại trong chuỗi gốc hay không và trả về giá trị true hoặc false.
- String startsWith(): Phương thức này kiểm tra xem chuỗi có bắt đầu bằng chuỗi con cụ thể hay không và trả về giá trị true hoặc false.
- String endsWith(): Phương thức này kiểm tra xem chuỗi có kết thúc bằng chuỗi con cụ thể hay không và trả về giá trị true hoặc false.
2. Chi tiết các phương thức tìm kiếm.
2.1. JavaScript String indexOf().
Phương thức indexOf() trong JavaScript trả về vị trí (index) của lần xuất hiện đầu tiên của một chuỗi con trong chuỗi gốc.
Dưới đây là một ví dụ:
<html>
<body>
<p id="demo"></p>
<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate");
document.getElementById("demo").innerHTML = index;
</script>
</body>
</html>Trong ví dụ này, chúng ta tìm kiếm chuỗi con “locate” trong chuỗi gốc và phương thức indexOf("locate") trả về vị trí 7, nơi lần xuất hiện đầu tiên của “locate” bắt đầu. Nếu chuỗi con không được tìm thấy trong chuỗi gốc, indexOf() sẽ trả về -1.
Lưu ý JavaScript đếm vị trí bắt đầu từ số 0. 0 là vị trí đầu tiên trong một chuỗi. 1 là vị trí thứ hai. 2 là vị trí thứ ba. Và cứ tiếp tục như vậy. Nếu bạn muốn tìm vị trí của một ký tự hoặc chuỗi con trong chuỗi, bạn cần xác định rõ vị trí đếm bắt đầu từ 0.
2.2. JavaScript String lastIndexOf().
Phương thức lastIndexOf() trong JavaScript trả về vị trí (index) của lần xuất hiện cuối cùng của một chuỗi con được chỉ định trong chuỗi gốc.
Dưới đây là một ví dụ:
<html>
<body>
<p id="demo"></p>
<script>
let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate");
document.getElementById("demo").innerHTML = index;
</script>
</body>
</html>Trong ví dụ này, chúng ta tìm kiếm chuỗi con “locate” trong chuỗi gốc và phương thức lastIndexOf("locate") trả về vị trí 21, nơi lần xuất hiện cuối cùng của “locate” xuất hiện.
Cả indexOf() và lastIndexOf() đều trả về giá trị -1 nếu chuỗi con không được tìm thấy trong chuỗi gốc.
Dưới đây là ví dụ:
<html>
<body>
<p id="demo"></p>
<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("John");
document.getElementById("demo").innerHTML = index;
</script>
</body>
</html>Trong ví dụ này, “John” không xuất hiện trong chuỗi gốc, nên cả hai phương thức indexOf() và lastIndexOf() đều trả về -1 để báo hiệu rằng không tìm thấy chuỗi con.
Cả indexOf() và lastIndexOf() cho phép bạn chỉ định một tham số thứ hai là vị trí bắt đầu cho việc tìm kiếm. Tham số này xác định vị trí trong chuỗi gốc mà tìm kiếm sẽ bắt đầu.
Dưới đây là ví dụ:
<html>
<body>
<p id="demo"></p>
<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate",15);
document.getElementById("demo").innerHTML = index;
</script>
</body>
</html>Trong ví dụ này, chúng ta tìm kiếm chuỗi con “locate” trong chuỗi gốc, nhưng chúng ta bắt đầu từ vị trí 15 (tính từ 0), nên kết quả trả về là 21, vị trí của lần xuất hiện cuối cùng của “locate” sau vị trí 15. Điều này cho phép bạn tìm kiếm chuỗi con từ một vị trí cụ thể trong chuỗi gốc.
Phương thức lastIndexOf() thực hiện tìm kiếm ngược lại (từ cuối chuỗi về đầu), có nghĩa là nếu bạn chỉ định một tham số thứ hai, việc tìm kiếm sẽ bắt đầu từ vị trí đó và di chuyển ngược lại phía đầu của chuỗi.
Trong ví dụ sau:
<html>
<body>
<p id="demo"></p>
<script>
let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate", 15);
document.getElementById("demo").innerHTML = index;
</script>
</html>Chúng ta bắt đầu tìm kiếm từ vị trí 15 (tính từ 0) và di chuyển ngược lại phía đầu của chuỗi. Kết quả trả về là 7, vị trí của lần xuất hiện đầu tiên của “locate” trước vị trí 15. Điều này cho phép bạn tìm kiếm các lần xuất hiện gần cuối của chuỗi con trong chuỗi gốc.
2.3. JavaScript String search().
Phương thức search() trong JavaScript được sử dụng để tìm kiếm một chuỗi con (hoặc một biểu thức chính quy) trong chuỗi gốc và trả về vị trí của sự khớp đó.
Dưới đây là ví dụ:
<html>
<body>
<p id="demo"></p>
<script>
let text = "Please locate where 'locate' occurs!";
let index = text.search("locate");
document.getElementById("demo").innerHTML = index;
</script>
</html>Trong ví dụ này, chúng ta tìm kiếm chuỗi con “locate” trong chuỗi gốc và phương thức search("locate") trả về vị trí đầu tiên của “locate”, tức là 7.
Bạn cũng có thể sử dụng biểu thức chính quy ví dụ sử dụng dấu / trong search():
<html>
<body>
<p id="demo"></p>
<script>
let text = "Please locate where 'locate' occurs!";
let index = text.search(/locate/);
document.getElementById("demo").innerHTML = index;
</script>
</html>Cả hai ví dụ trên đều trả về cùng một kết quả vì “locate” xuất hiện ở vị trí 7 trong chuỗi gốc.
Lưu ý rằng search() chỉ trả về vị trí của lần xuất hiện đầu tiên của chuỗi con. Nếu không tìm thấy, nó sẽ trả về -1.
Như vậy bạn có thể nhận thấy hai phương thức indexOf() và search()không giống nhau hoàn toàn. Dưới đây là những điểm khác biệt:
- Phương thức
search()không thể chấp nhận một đối số thứ hai để chỉ định vị trí bắt đầu. - Phương thức
indexOf()không thể chấp nhận các giá trị tìm kiếm là biểu thức chính quy.
2.4. JavaScript String match().
Phương thức match() trong JavaScript được sử dụng để thực hiện tìm kiếm một chuỗi con trong một chuỗi gốc (hoặc một biểu thức chính quy) và nó trả về một mảng chứa kết quả của việc tìm kiếm đó.
<html>
<body>
<p id="demo"></p>
<script>
let text = "The rain in SPAIN stays mainly in the plain";
const myArr = text.match("ain");
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>
</html>Nếu bạn chạy JavaScript trong ví dụ trên thì kết quả sẽ là “1 ain” bởi vì bạn chỉ kiểm tra sự xuất hiện đầu tiên của chuỗi “ain” và trả về nó dưới dạng một mảng với một phần tử.
Khi bạn thực hiện tìm kiếm bằng biểu thức chính quy /ain/, phương thức match() sẽ trả về một mảng chứa tất cả các lần xuất hiện của chuỗi “ain” trong chuỗi gốc.
Tương tự bạn có thể sử dụng biểu thức chính quy /ain/ chỉ tìm kiếm và trả về lần xuất hiện đầu tiên của chuỗi “ain” trong chuỗi gốc. Và tương tự, bạn nhận được kết quả “1 ain”
<html>
<body>
<p id="demo"></p>
<script>
let text = "The rain in SPAIN stays mainly in the plain";
const myArr = text.match(/ain/);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>
</body>
</html>Khi bạn thực hiện tìm kiếm toàn cục (global search) bằng cách sử dụng cờ g với biểu thức chính quy /ain/g, phương thức match() sẽ trả về tất cả các lần xuất hiện của chuỗi “ain” trong chuỗi gốc dưới dạng một mảng.
<html>
<body>
<p id="demo"></p>
<script>
let text = "The rain in SPAIN stays mainly in the plain";
const myArr = text.match(/ain/g);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>
</body>
</html>Nếu bạn chạy đoạn JavaScript trong ví dụ này, kết quả sẽ là “3 ain,ain,ain”. Đây là do đoạn code này, bạn đã thực hiện tìm kiếm toàn cục (global search) bằng biểu thức chính quy /ain/g. Kết quả là một mảng chứa tất cả ba lần xuất hiện của chuỗi “ain” trong chuỗi gốc, và do đó, bạn nhận được kết quả “3 ain,ain,ain”.
3 ain,ain,ainKhi bạn thực hiện tìm kiếm toàn cục và không phân biệt chữ hoa chữ thường (global, case-insensitive search) bằng cách sử dụng cờ g và i với biểu thức chính quy /ain/gi, phương thức match() sẽ trả về tất cả các lần xuất hiện của chuỗi “ain” (bất kể chữ hoa hoặc chữ thường) trong chuỗi gốc dưới dạng một mảng.
<html>
<body>
<p id="demo"></p>
<script>
let text = "The rain in SPAIN stays mainly in the plain";
const myArr = text.match(/ain/gi);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>
</body>
</html>Trong ví dụ này, biểu thức chính quy /ain/gi tìm kiếm toàn cục và không phân biệt chữ hoa chữ thường. Vì vậy, nó sẽ tìm thấy tất cả các lần xuất hiện của chuỗi “ain” (bao gồm “ain” và “AIN”) và trả về chúng dưới dạng một mảng. Kết quả này bao gồm 4 lần xuất hiện của “ain” trong chuỗi gốc.
4 ain,AIN,ain,ainLưu ý: Nếu một biểu thức chính quy không bao gồm cờ g (tìm kiếm toàn cục), phương thức match() sẽ chỉ trả về lần xuất hiện đầu tiên trong chuỗi. Cờ g là cần thiết để tìm tất cả các kết quả khớp trong chuỗi.
2.5. JavaScript String matchAll().
Phương thức matchAll() trả về một trình vòng lặp (iterator) chứa tất cả các kết quả của việc khớp một chuỗi với một chuỗi (hoặc biểu thức chính quy).
Nó cho phép bạn duyệt qua tất cả các kết quả của khớp một cách tuần tự.
<html>
<body>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll("Cats");
document.getElementById("demo").innerHTML = Array.from(iterator);
</script>
</body>
</html>Trong ví dụ sau, const iterator = text.matchAll("Cats"); sẽ tạo ra một trình vòng lặp (iterator) chứa tất cả các kết quả của việc khớp chuỗi “Cats” trong chuỗi text. Bạn có thể sử dụng vòng lặp để duyệt qua tất cả các kết quả này một cách tuần tự.
Cats,CatsNếu tham số truyền vào phương thức matchAll() là một biểu thức chính quy, thì cờ toàn cục (g) phải được đặt, nếu không sẽ gây ra một lỗi TypeError.
<html>
<body>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/g);
document.getElementById("demo").innerHTML = Array.from(iterator);
</script>
</body>
</html>Trong ví dụ sau, const iterator = text.matchAll(/Cats/g); sẽ tạo ra một trình vòng lặp (iterator) chứa tất cả các kết quả của việc khớp biểu thức chính quy /Cats/g trong chuỗi text. Việc sử dụng cờ g cho phép tìm tất cả các kết quả khớp trong chuỗi bằng biểu thức chính quy.
Cats,CatsNếu bạn muốn thực hiện tìm kiếm không phân biệt chữ hoa chữ thường (case-insensitive), bạn cần thiết lập cờ không phân biệt chữ hoa chữ thường (i) trong biểu thức chính quy.
<html>
<body>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/gi);
document.getElementById("demo").innerHTML = Array.from(iterator);
</script>
</body>
</html>Trong trường hợp này, biểu thức chính quy /Cats/gi sẽ tìm kiếm tất cả các kết quả khớp với “Cats” trong chuỗi text, mà không phân biệt chữ hoa chữ thường.
cats,Cats,CatsmatchAll() là một tính năng của ECMAScript 2020 (ES2020) và không được hỗ trợ trong Internet Explorer. Nó là một phương thức mới cho việc tìm kiếm và khớp chuỗi sử dụng biểu thức chính quy trong JavaScript.
2.6. JavaScript String includes().
Phương thức includes() trong JavaScript trả về true nếu một chuỗi chứa giá trị được chỉ định và ngược lại trả về false.
Điều này giúp kiểm tra xem một chuỗi có chứa một giá trị cụ thể hay không.
<html>
<body>
<p id="demo"></p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world");
</script>
</body>
</html>Trong ví dụ trên, text.includes("world") trả về true vì chuỗi text chứa chuỗi “world”.
Phương thức includes() trong JavaScript cũng cho phép bạn bắt đầu kiểm tra từ một vị trí cụ thể trong chuỗi bằng cách cung cấp tham số thứ hai là vị trí bắt đầu.
Trong trường hợp này, nó sẽ trả về true nếu chuỗi chứa giá trị được chỉ định bắt đầu từ vị trí được xác định, ngược lại sẽ trả về false.
<html>
<body>
<p id="demo"></p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world", 12);
</script>
</body>
</html>Trong ví dụ trên, text.includes("world", 12) trả về false vì chuỗi không chứa “world” từ vị trí 12 trở đi.
Phương thức includes() trong JavaScript phân biệt chữ hoa chữ thường, nghĩa là nó sẽ xem xét trường hợp của các ký tự.
Điều này có nghĩa rằng nó sẽ trả về false nếu bạn tìm kiếm một chuỗi chứa giá trị có trùng trường hợp với giá trị được chỉ định.
<html>
<body>
<p id="demo"></p>
<script>
let text = "Hello World!";
document.getElementById("demo").innerHTML = text.includes("world");
</script>
</body>
</html>Lưu ý rằng includes() là một tính năng của ES6 và không được hỗ trợ trong Internet Explorer.
2.7. JavaScript String startsWith().
Phương thức startsWith() trong JavaScript được sử dụng để kiểm tra xem một chuỗi có bắt đầu bằng một giá trị cụ thể không.
Nếu chuỗi bắt đầu bằng giá trị được chỉ định, phương thức sẽ trả về true, ngược lại sẽ trả về false.
<html>
<body>
<p id="demo"></p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world");
</script>
</body>
</html>Lưu ý rằng startsWith() kiểm tra xem chuỗi có bắt đầu bằng giá trị được chỉ định và phân biệt trường hợp (không phải kiểm tra màu của các ký tự). Điều này có nghĩa nó sẽ trả về false nếu không trùng khớp chính xác về trường hợp.
Ví dụ trường hợp tìm từ khoá hoanghd, do không tồn tại nên sẽ trả về false.
<html>
<body>
<p id="demo"></p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("hoanghd");
</script>
</body>
</html>Chú ý, phương thứcstartsWith() là một phương thức của ES6 và không được hỗ trợ trong Internet Explorer.
Nếu bạn muốn kiểm tra xem chuỗi có bắt đầu bằng một giá trị cụ thể từ một vị trí cụ thể, bạn có thể sử dụng phương thức startsWith() .
<html>
<body>
<p id="demo"></p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world", 12);
</script>
</body>
</html>Trong ví dụ này, text.startsWith("world", 5) đang kiểm tra xem chuỗi "Hello world, welcome to the universe." bắt đầu từ vị trí 5 (số 0 đếm từ 0) có bắt đầu bằng "world" không. Do vị trí 5 trỏ đến ký tự "o" trong chuỗi, nên nó không bắt đầu bằng "world" và do đó biểu thức sẽ trả về giá trị false.
Hoặc 1 ví dụ trả về kết quả là true.
<html>
<body>
<p id="demo"></p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world", 6);
</script>
</body>
</html>Ghi chú.
includes()là phân biệt chữ hoa chữ thường: Phương thứcincludes()xem xét sự phân biệt chữ hoa chữ thường. Điều này có nghĩa là nó sẽ chỉ trả vềtruenếu chuỗi chính thức chứa giá trị cụ thể chính xác và có chữ hoa/chữ thường khớp với giá trị cụ thể.includes()là một tính năng của ES6: Phương thứcincludes()là một tính năng của phiên bản ES6 (ECMAScript 2015) của JavaScript. Điều này có nghĩa là nó chỉ được hỗ trợ trong các phiên bản JavaScript hiện đại và không có trong Internet Explorer, một trình duyệt web lỗi thời.
Do đó, khi sử dụng includes(), bạn cần lưu ý rằng nó không phân biệt chữ hoa chữ thường và không hoạt động trên Internet Explorer.
2.8. JavaScript String endsWith().
Phương thức này kiểm tra xem chuỗi có kết thúc bằng chuỗi con cụ thể hay không và trả về giá trị true hoặc false.
Trong ví dụ này, text.endsWith("Doe") đang kiểm tra xem chuỗi "John Doe" kết thúc bằng "Doe" hay không. Vì chuỗi này thực sự kết thúc bằng "Doe", nên biểu thức sẽ trả về giá trị true.
<html>
<body>
<p id="demo"></p>
<script>
let text = "John Doe";
document.getElementById("demo").innerHTML = text.endsWith("Doe");
</script>
</body>
</html>Trong ví dụ này, text.endsWith("world", 11) kiểm tra xem 11 ký tự đầu tiên của chuỗi "Hello world, welcome to the universe." có kết thúc bằng "world" không.
Kết quả trả về “true” vì chuỗi “Hello world,” chứa chuỗi “world” tại vị trí cuối cùng. Khi bạn sử dụng text.endsWith("world", 11);, nó kiểm tra xem 11 ký tự đầu tiên của chuỗi có kết thúc bằng “world” không, và trong trường hợp này, nó đúng.
<html>
<body>
<p id="demo"></p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.endsWith("world", 11);
</script>
</body>
</html>
