Bài 12. Các hàm xử lý chuỗi trong Javascript

bởi | Th9 11, 2022 | Chưa phân loại

Trong bài học này chúng ta sẽ giới thiệu các hàm xử lý chuỗi string trong Javascript được sử dụng rất nhiều trong quá trình làm việc với JS.

Bài trước chúng ta đã tìm hiểu về chuỗi trong javascript và các bạn đã được làm quen với một số hàm cơ bản. Tuy nhiên, trong thực tế khi làm việc với Javascript chúng ta cần sử dụng rất nhiều hàm khác nữa như: Hàm cắt chuỗi trong JS, hàm tách chuỗi và nối chuỗi, hàm tìm và thay thế ký tự trong chuỗi…

Các hàm xử lý chuỗi trong Javascript

Trong Javascript có rất nhiều hàm dùng để xử lý chuỗi, tuy nhiên chúng ta chỉ cần tập trung vào những hàm được sử dụng nhiều nhất trong thực tế, những hàm khác các bạn có thể tìm hiểu thêm sau khi có những kiến thức cơ bản về phần này nhé

Tìm kiếm chuỗi string trong JS

Chúng ta có ba hàm thường dùng để tìm kiếm chuỗi con trong Javascript đã được làm quen ở bài trước

  • indexOf()
  • lastIndexOf()
  • search()

Hàm indexOf()

Để tìm kiếm chuỗi con thì ta sử dụng hàm String.indexOf(str), trong đó str là chuỗi con và String là chuỗi cha. Hàm này sẽ trả kết quả về kết quả là vị trí xuât hiện đầu tiên của chuỗi (bắt đầu là vị trí 0), nếu không tìm thấy chuỗi con thì nó sẽ trả về -1.

<html>
<body>
<script>
var str = "Chào mừng bạn đến với kynangso.edu.vn!";
var pos = str.indexOf("bạn"); // Kết quả trả về = 10
document.write(pos);
</script>
</body>
</html>

Hàm lastIndexOf()

Trường hợp nếu chuỗi con xuất hiện nhiều lần trong chuỗi cha thì kết quả cũng trả về vị trí xuất hiện của chuỗi con đầu tiên. Vậy làm thế nào để lấy vị trí của chuỗi con cuối cùng trong chuỗi cha? Ta sẽ sử dụng hàm string.lastIndexOf(str), hàm này sẽ trả về vị trí xuất hiện của chuỗi con cuối cùng và trả về -1 nếu không tìm thấy.

Hàm search()

Ngoài hai hàm trên bạn có thể sử dụng hàm string.search(str) để tìm kiếm, tác dụng của nó cũng giống như hàm string.indexOf(str).

<html>
<body>
<script>
var str = "Chào mừng bạn đến với kynangso.edu.vn!";
var pos = str.search("bạn"); // Kết quả trả về = 10
document.write(pos);
</script>
</body>
</html>

Cắt chuỗi string trong JS

Nếu ban muốn cắt một chuỗi con từ chuỗi cha thì bạn có thể sử dụng ba hàm sau:

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

Hàm slice()

Hàm slide có hai tham số truyền vào:

  • start: vị trí bắt đầu
  • end: vị trí kết thúc
<html>
    <body>
      <h2>JavaScript String Methods</h2>
      <p>Phương thức slice () sẽ trích xuất một phần của chuỗi và trả về một chuỗi con mới:</p><br>
    	<p>Bạn cần cắt lấy chuỗi "kynangso.edu.vn" từ chuỗi "Welcome to kynangso.edu.vn"</p>
        <script>
          var string = "Welcome to kynangso.edu.vn";
          document.write("Chuỗi cần lấy là: " + string.slice(11, 26));
        </script>
    </body>
</html>

Nếu tham số truyền vào là số âm thì nó sẽ tính ngược lại, nghĩa là nó sẽ đếm từ cuối chuối lên.

<html>
    <body>
		<h2>JavaScript String Methods</h2>
		<p>Phương thức slice () sẽ trích xuất một phần của chuỗi và trả về một chuỗi con mới:</p>
    	<p>Bạn cần cắt lấy chuỗi "kynangso.edu.vn" từ chuỗi "Welcome to kynangso.edu.vn"</p>
        <script>
          var string = "Welcome to kynangso.edu.vn";
          document.write("Chuỗi cần lấy là: " + string.slice(-15, 26));
        </script>
    </body>
</html>

Nếu bạn chỉ truyền một tham số đầu tiên thì nó sẽ tự hiểu vị trí end là vị trí cuối cùng.

<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Phương thức slice () sẽ trích xuất một phần của chuỗi và trả về một chuỗi con mới:</p>
<p id="demo"></p>
<script>
let str = "Porsche Audi BMW Mercedess";
document.getElementById("demo").innerHTML = str.slice(-9);
</script>
</body>
</html>

Hàm substring()

Đọc thêm:  Bài 10. Sự kiện trong Javascript

Hàm substring() có cách sử dụng giống với hàm slice(), tuy nhiên tham số truyền vào hàm substring() phải luôn luôn lớn hơn 0.

<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Phương thức substring() hoạt động giống với slice() nhưng các vị trí truyền vào phải >0:</p>
<p id="demo"></p>
<script>
let str = "Porsche Audi BMW Mercedess";
document.getElementById("demo").innerHTML = str.substring(0,7);
</script>
</body>
</html>

Hàm substr()

Hàm substr() tương tự như substring() và slice() nhưng có hai tham số là start và length, trong đó start là vị trí bắt đầu và length là số ký tự muốn lấy bắt đầu từ vị trí start. Nếu bạn truyền tham số start là số âm thì nó sẽ tính từ cuối trở lên, còn tham số length phải luôn luôn là số dương.

<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Phương thức substr () sẽ trích xuất một phần của chuỗi và trả về một chuỗi con mới:</p>
<p id="demo"></p>
<script>
let str = "Porsche Audi BMW Mercedess";
document.getElementById("demo").innerHTML = str.substr(8,4);
</script>
</body>
</html>

Thay thế nội dung trong chuỗi

Để tìm kiếm và lặp một chuỗi con nào đó thì bạn sử dụng hàm replace(str_find, str_replace), trong đó str_find là chuỗi cần tìm và str_replace là chuỗi sẽ được thay thế chuỗi str_find.

<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Thay thế "kynangso.edu.vn" bằng "hourofcode.vn":</p>
<button onclick="myFunction()">Bấm vào đây</button>
<p id="demo">Website kynangso.edu.vn - Địa chỉ học lập trình tốt nhất cho trẻ em!</p>
<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.replace("kynangso.edu.vn","hourofcode.vn");
}
</script>
</body>
</html>

Lưu ý

  • Phương thức replace() không thay đổi chuỗi mà nó được gọi.
  • Phương thức replace() trả về một chuỗi mới.
  • Phương thức replace() chỉ thay thế kết quả đầu tiên được tìm thấy

Theo mặc định, replace()phương thức này chỉ thay thế kết quả phù hợp đầu tiên, Nếu bạn muốn thay thế tất cả các kết quả phù hợp, hãy sử dụng kết hợp như ví dụ bên dưới. 

<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Thay thế "kynangso.edu.vn" bằng "hourofcode.vn" trong đoạn văn bản dưới đây:</p>
<button onclick="myFunction()">Bấm vào đây</button>
<p id="demo">Welcome to kynangso.edu.vn Website kynangso.edu.vn cung cấp các khóa học kỹ năng số!</p>
<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace("kynangso.edu.vn","hourofocode.vn");
}
</script>
</body>
</html>

Chuyển thành chữ hoa và chữ thường trong JS

Để chuyển chuỗi thành chữ hoa ta dùng hàm toUpperCase() và chuyển thành chữ thường ta dùng hàm toLowerCase()

<html>
    <body>
    	<p> Phương thức toUpperCase() chuyển chữ thường thành chữ hoa</p>
        <p> Phương thức toLowerCase() chuyển chữ hoa thành chữ thường</p>
        <script>
          var string = "Welcome to Kynangso.edu.vn";
          document.write(string.toUpperCase() + "<br/>");
          document.write(string.toLowerCase());
        </script>
    </body>
</html>

Nối thêm chuỗi

Để nối thêm chuỗi thông thường ta dùng toán tử +, ngoài ra bạn có thể dùng hàm concat() để thực hiện nối chuỗi.

<html>
    <body>
      <p>Phương thức concat() dùng để nối 2 hay nhiều chuỗi với nhau</p>
        <script>
          var string = "Welcome " + "to" + " kynangso.edu.vn";
          document.write(string + "<br/>");
          
          // hoặc
          var string = "Welcome ";
          string = string.concat("to ", " kynangso.edu.vn");
          document.write(string + "<br/>");
        </script>
    </body>
</html>

Lưu ý: Tất cả các phương thức của chuỗi đều trả về chuỗi mới, không làm thay đổi chuỗi nguồn

Đọc thêm:  Bài 16. Các phương thức duyệt mảng Javascript

Loại bỏ khoảng trắng ở hai đầu chuỗi

Phương thức trim() loại bỏ khoảng trắng ở cả hai đầu (trái và phải) của một chuỗi

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>Phương thức trim() dùng để cắt khoảng trắng ở hai đầu chuỗi</h2>
<p id="demo"></p>
<script>
let text1 = "     Welcome to kynangso.edu.vn     ";
let text2 = text1.trim();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>
</body>
</html>

Tìm ký tự hoặc mã ASCII của một ký tự

Để xem ký tự của một vị trí nào đó thì dùng hàm charAt(), còn xem mã ASCII thì dùng hàm charCodeAt(). Cả hai hàm này đều có tham số truyền vào là vị trí muốn xem.

<html>
    <body>
        <script language="javascript">
          var string = "Welcome kynangso.edu.vn";
          document.write(string.charAt(1) + "<br/>");
          document.write(string.charCodeAt(1) + "<br/>");
        </script>
    </body>
</html>

Chuyển đổi chuỗi sang mảng JS

Để chuyển một chuỗi sang mảng thì ta sử dụng hàm split() với tham số truyền vào là ký tự ngăn cách giữa các phần tử.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>
<p>Display the first array element, after a string split:</p>
<p id="demo"></p>
<script>
let text = "Audi,BMW,Porsche,Mercedes,Bentley";
const myArray = text.split(",");
document.getElementById("demo").innerHTML = myArray[2];
</script>
</body>
</html>

Kiểm tra chuỗi bắt đầu bằng 1 chuỗi với phương thức startWith()

Phương thức startsWith() trả về giá trị true nếu một chuỗi bắt đầu bằng một chuỗi được chỉ định, nếu không false:

Cú pháp

string.startsWith(searchvalue, start)

Giá trị tham số

Tham sốGiải thích
searchvalueTham số bắt buộc: Giá trị cần tìm
startTham số tùy chọn. Vị trí bắt đầu tìm kiểm, mặc địch là 0
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Kiểm trả một chuỗi bắt đầu bằng "Welcome":</p>
<p id="demo"></p>
<p>Phương thức startsWith() không hỗ trợ trên trình duyệt Internet Explorer.</p>
<script>
let text = "Welcome to kynangso.edu.vn - Địa chỉ học kỹ năng số cho người mới bắt đầu.";
document.getElementById("demo").innerHTML = text.startsWith("Welcome");
</script>
</body>
</html>

Lưu ý: Phương thức startsWith() này có phân biệt chữ hoa và chữ thường

Kiểm tra chuỗi có kết thúc bằng một chuỗi không, với endsWith()

Phương thức endsWith() trả về true nếu một chuỗi kết thúc bằng một chuỗi được chỉ định, nếu không false:

Cú pháp

string.endsWith(searchvalue, length)

Giá trị tham số

Tham sốGiải thích
searchvalueTham số bắt buộc: Giá trị cần tìm
lengthTham số tùy chọn: Độ dài của chuỗi cần tìm
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Kiểm trả một chuỗi kết thúc bằng "kynangso.edu.vn":</p>
<p id="demo"></p>
<p>Phương thức endsWith() không hỗ trợ trên trình duyệt Internet Explorer.</p>
<script>
let text = "Welcome to kynangso.edu.vn - Địa chỉ học kỹ năng số cho người mới bắt đầu.";
document.getElementById("demo").innerHTML = text.endsWith("kyangso.edu.vn");
</script>
</body>
</html>

Chuỗi bao gồm một chuỗi

Phương thức includes() trả về true nếu một chuỗi chứa một giá trị được chỉ định.

Cú pháp

string.includes(searchvalue, start)

Trong đó

  • searchvalue: Nội dung cần tìm (tham số bắt buộc)
  • start: Vị trí bắt đầu tìm (tham số tùy chọn)

Hãy thử ví dụ dưới đây

<html>
<body>
<h2>JavaScript String Search</h2>
<p>Kiểm tra xem chuỗi có chưa từ "world" không:</p>
<p id="demo"></p>
<p>Phương thức includes() không hỗ trợ trên trình duyệt Internet Explorer.</p>
<script>
let text = "Hello world, welcome to the kynangso.edu.vn.";
document.getElementById("demo").innerHTML = text.includes("world",6);
</script>
</body>
</html>

Như vậy chúng ta đã được làm quen một số hàm xử lý chuỗi trong Javascript thông dụng nhất. Hy vọng sau bài này kynangso.edu.vn sẽ giúp bạn có thêm tài liệu để xử lý chuỗi trong quá trình làm việc với Javascript. Chúc bạn thành công!