Bagaimana untuk menyemak sama ada rentetan bermula/berakhir dengan rentetan tertentu dalam jQuery?

Hubungan JavaScript dengan fail HTML/CSS, khususnya dengan Model Objek Dokumen (DOM), menjadi lebih mudah dengan pustaka sumber terbuka yang dipanggil "jQuery". Melintasi dan memanipulasi fail HTML, mengawal acara penyemak imbas, menjana visual DOM, memudahkan sambungan Ajax dan pengaturcaraan JavaScript merentas platform semuanya menjadi lebih mudah dengan pakej ini.

Untuk mengesahkan sama ada rentetan tertentu membentuk subrentetan rentetan lain, JavaScript menyediakan pelbagai fungsi rentetan. Oleh itu, jQuery tidak diperlukan untuk tugas ini.

Walau bagaimanapun, kami akan menggambarkan pelbagai cara untuk mengesahkan sama ada rentetan bermula atau berakhir dengan rentetan lain:

Kaedah

• startsWith() dan endsWith().

• kaedah carian().

Kaedah

• indexOf().

• kaedah substring().

• substr() kaedah

• kaedah slice().

Andaikan kita mempunyai rentetan, str = "Hai, apa khabar?"

Kaedah 1-str.startsWith()

Kaedah str.startsWith() dalam JavaScript digunakan untuk mengesahkan sama ada aksara dalam rentetan yang diberikan adalah permulaan rentetan yang ditentukan. Teknik ini adalah sensitif huruf besar, bermakna ia membezakan antara huruf besar dan huruf kecil.

Kaedah di atas menerima dua parameter, seperti yang dinyatakan sebelum ini, seperti yang dijelaskan di bawah:

• searchString: membentuk parameter wajib dan menyimpan rentetan untuk dicari.

• mula: Ia menetapkan kedudukan dalam rentetan yang dibekalkan dari mana searchString akan ditemui. Nilai lalai ialah sifar.

Tatabahasa

str.startsWith( searchString , position )

Contoh

function func() {
		
   var str = 'Hi, how are you?';
		
   var value = str.startsWith('Hi');
   console.log(value);
}
func();

Output

true

Kaedah 2-endsWith()

Untuk menentukan sama ada rentetan yang dibekalkan berakhir dengan aksara dalam rentetan lain, gunakan kaedah JavaScript str.endsWith().

Kaedah di atas mengambil dua parameter yang dinyatakan sebelum ini, seperti yang diterangkan di bawah:

• searchString: Mewakili rentetan yang perlu ditemui di hujung rentetan yang diberikan.

• panjang: Parameter panjang menentukan saiz rentetan asal yang akan disemak rentetan carian.

Apabila fungsi ini dilaksanakan, jika searchString ditemui, nilai Boolean benar dikembalikan jika tidak, false dikembalikan.

Contoh

function func() {
		
   var str = 'Hi, how are you?';
		
   var value = str.startsWith('you?');
   console.log(value);
}
func();

Output

false

Kaedah 3 - string.search()

Kaedah string.search() JavaScript ialah fungsi terbina dalam yang mencari padanan antara ungkapan biasa dan objek rentetan yang ditentukan.

Tatabahasa

string.search( A )

Contoh

var string = "Hi, how are you?";
	
var re1 = /s/;
var re2 = /3/;
var re3 = / /;
var re4 = /, /;
	
console.log(string.search(re1));
console.log(string.search(re2));
console.log(string.search(re3));
console.log(string.search(re4));

Output

-1
-1
3
2

Kaedah 4: String indexOf()

Fungsi str.indexOf() dalam JavaScript mencari indeks contoh pertama argumen rentetan yang dibekalkan dalam rentetan yang diberikan. Keputusan bermula dari 0.

Tatabahasa

str.indexOf(searchValue , index)

Contoh

function func() {
	
   var str = 'Hi, How are you?';
	
   var index = str.indexOf('are');
   console.log(index);
}
func();

Output

8

Kaedah 5: Subrentetan rentetan()

Kaedah JavaScript string.substring() ialah fungsi terbina dalam yang mengembalikan sebahagian daripada rentetan yang diberikan, bermula pada indeks mula yang ditentukan dan berakhir pada indeks akhir yang disediakan. Pengindeksan dalam kaedah ini bermula pada sifar (0).

Tatabahasa

string.substring(Startindex, Endindex)

Parameter Startindex dan Endindex menentukan segmen rentetan untuk diekstrak sebagai subrentetan. Parameter Endindex adalah pilihan.

Apabila fungsi string.substring() dilaksanakan, ia mencipta rentetan baharu yang mewakili sebahagian daripada rentetan asal.

Contoh

var string = "Hi, how are you?";
a = string.substring(0, 4)
b = string.substring(1, 6)
c = string.substring(5)
d = string.substring(0)
	
console.log(a);
console.log(b);
console.log(c);
console.log(d);

Output

Hi, 
i, ho
ow are you?
Hi, how are you?

Kaedah 6: String substr()

Kaedah str.substr() dalam JavaScript membolehkan anda mengekstrak bilangan aksara tertentu daripada rentetan tertentu bermula daripada indeks yang ditentukan. Kaedah ini berkesan mengekstrak segmen rentetan asal.

Tatabahasa

str.substr(start , length)

Contoh

function func() {
	
   var str = 'Hi, how are you?';
   var sub_str = str.substr(5);
   console.log(sub_str);
}

func();

Output

ow are you?

Kaedah 7: string.slice()

Kaedah JavaScript string.slice() digunakan untuk mengekstrak sebahagian atau kepingan rentetan input yang disediakan dan mengembalikannya sebagai rentetan baharu.

Tatabahasa

string.slice(startingIndex, endingIndex)

Contoh

var A = 'Hi, How are you?';
b = A.slice(0,5);
c = A.slice(6,9);
d = A.slice(0);
	
console.log(b);
console.log(c);
console.log(d);

Output

Hi, H
w a
Hi, How are you?

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>jQuery Methods Demo</title>
   <style>
      /* CSS Styles */
      body {
         font-family: Arial, sans-serif;
         margin: 0;
         padding: 20px;
      }

      h1 {
         text-align: center;
      }

      h2 {
         margin-top: 30px;
      }

      p {
         margin: 10px 0;
      }

      .container {
         max-width: 600px;
         margin: 0 auto;
      }

      button {
         padding: 10px 20px;
         background-color: #007bff;
         color: #fff;
         border: none;
         cursor: pointer;
         transition: background-color 0.3s;
      }

      button:hover {
         background-color: #0056b3;
      }

      input[type="text"] {
         padding: 5px;
         border: 1px solid #ccc;
         border-radius: 3px;
      }

      .output {
         font-weight: bold;
      }
   </style>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script>
      $(document).ready(function() {
         var text = "Hello, World!";
         $("#textContent").text(text);

         // startsWith() method
         $("#startsWithBtn").click(function() {
            var result = text.startsWith("Hello");
            $("#startsWithOutput").text(result);
         });

         // endsWith() method
         $("#endsWithBtn").click(function() {
            var result = text.endsWith("World!");
            $("#endsWithOutput").text(result);
         });

         // search() method
         $("#searchBtn").click(function() {
            var searchTerm = $("#searchTerm").val();
            var result = text.search(searchTerm);
            $("#searchOutput").text(result);
         });

         // indexOf() method
         $("#indexOfBtn").click(function() {
            var searchTerm = $("#indexOfTerm").val();
            var result = text.indexOf(searchTerm);
            $("#indexOfOutput").text(result);
         });

         // substring() method
         $("#substringBtn").click(function() {
            var start = $("#substringStart").val();
            var end = $("#substringEnd").val();
            var result = text.substring(start, end);
            $("#substringOutput").text(result);
         });

         // substr() method
         $("#substrBtn").click(function() {
            var start = $("#substrStart").val();
             var length = $("#substrLength").val();
            var result = text.substr(start, length);
            $("#substrOutput").text(result);
         });

         // slice() method
         $("#sliceBtn").click(function() {
            var start = $("#sliceStart").val();
            var end = $("#sliceEnd").val();
            var result = text.slice(start, end);
            $("#sliceOutput").text(result);
         });
      });
   </script>
</head>
<body>
   <div class="container">
      <h1>jQuery Methods Demo</h1>
   
      <h2>Text Content</h2>
      <p id="textContent"></p>
   
      <h2>startsWith() Method</h2>
      <button id="startsWithBtn">Check if the text starts with "Hello"</button>
      <p>Result: <span id="startsWithOutput" class="output"></span></p>
   
      <h2>endsWith() Method</h2>
      <button id="endsWithBtn">Check if the text ends with "World!"</button>
      <p>Result: <span id="endsWithOutput" class="output"></span></p>
   
      <h2>search() Method</h2>
      <input type="text" id="searchTerm" placeholder="Enter search term">
      <button id="searchBtn">Search</button>
      <p>Result: <span id="searchOutput" class="output"></span></p>
   
      <h2>indexOf() Method</h2>
      <input type="text" id="indexOfTerm" placeholder="Enter search term">
      <button id="indexOfBtn">Find index</button>
      <p>Result: <span id="indexOfOutput" class="output"></span></p>
   
      <h2>substring() Method</h2>
      <input type="text" id="substringStart" placeholder="Enter start index">
      <input type="text" id="substringEnd" placeholder="Enter end index">
      <button id="substringBtn">Get substring</button>
      <p>Result: <span id="substringOutput" class="output"></span></p>
   
      <h2>substr() Method</h2>
      <input type="text" id="substrStart" placeholder="Enter start index">
      <input type="text" id="substrLength" placeholder="Enter length">
      <button id="substrBtn">Get substring</button>
      <p>Result: <span id="substrOutput" class="output"></span></p>
   
      <h2>slice() Method</h2>
      <input type="text" id="sliceStart" placeholder="Enter start index">
      <input type="text" id="sliceEnd" placeholder="Enter end index">
      <button id="sliceBtn">Get slice</button>
      <p>Result: <span id="sliceOutput" class="output"></span></p>
   </div>
</body>
</html>

Arahan

Skrip HTML yang disediakan memulakan pembolehubah teks dengan nilai "Hello, World!" dan gunakan JavaScript untuk mengeluarkannya ke tapak web. Ia mencipta pengendali acara butang yang dikaitkan dengan pelbagai fungsi jQuery. Kaedah masing-masing butang ini dicetuskan apabila diklik, dan komponen output memaparkan hasilnya. Watak "Hello" ialah watak pertama yang dicari oleh kaedah startsWith(). Kaedah endsWith() menentukan sama ada rentetan berakhir dengan "Dunia!" Apabila mencari teks untuk frasa yang dibekalkan pengguna, kaedah carian() menyediakan indeks kejadian pertama. Indeks frasa yang dibekalkan pengguna dalam teks boleh didapati menggunakan kaedah indexOf(). Fungsi subrentetan(), substr(), dan slice() mengekstrak subrentetan daripada teks menggunakan indeks mula dan tamat yang dibekalkan pengguna. Secara amnya, pembolehubah teks halaman web dimanipulasi dan diperiksa menggunakan teknologi jQuery dan kod JavaScript, yang turut membenarkan penyertaan pengguna.

Kesimpulan

• JavaScript menyediakan satu siri fungsi rentetan untuk mengesahkan sama ada rentetan ialah subrentetan rentetan lain.

Kaedah

• JavaScript str.startsWith() digunakan untuk menyemak sama ada rentetan yang ditentukan bermula dengan aksara dalam rentetan yang disediakan. Kaedah ini sensitif huruf besar-besaran, yang bermaksud ia membezakan antara huruf besar dan huruf kecil.

• JavaScript menggunakan fungsi str.endsWith() untuk menentukan sama ada rentetan yang diberikan berakhir dengan aksara dalam rentetan yang disediakan.

• JavaScript menyediakan kaedah terbina dalam yang dipanggil string.search() untuk mencari padanan antara objek rentetan yang diberikan dan ungkapan biasa.

• Fungsi str.indexOf() JavaScript mencari indeks kejadian pertama parameter rentetan yang dibekalkan dalam rentetan yang dibekalkan. Hasilnya adalah sifar tanah.

• JavaScript function string.substring() mendapatkan semula sebahagian daripada rentetan yang disediakan, bermula pada indeks mula dan berakhir pada indeks akhir. Pengindeksan bermula pada kedudukan sifar.

• Kaedah JavaScript str.substr() mengekstrak bilangan aksara yang telah ditetapkan daripada rentetan yang disediakan, bermula pada indeks yang telah ditetapkan. Pada asasnya, teknik ini mengekstrak sebahagian daripada rentetan asal.

• Anda boleh mengekstrak sebahagian atau kepingan rentetan input yang diberikan menggunakan kaedah JavaScript string.slice(), yang mengembalikan bahagian yang diekstrak sebagai rentetan baharu.

Atas ialah kandungan terperinci Bagaimana untuk menyemak sama ada rentetan bermula/berakhir dengan rentetan tertentu dalam jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!