Heim  >  Artikel  >  Web-Frontend  >  Wie überprüfe ich, ob eine Zeichenfolge in jQuery mit einer bestimmten Zeichenfolge beginnt/endet?

Wie überprüfe ich, ob eine Zeichenfolge in jQuery mit einer bestimmten Zeichenfolge beginnt/endet?

WBOY
WBOYnach vorne
2023-08-24 12:45:10881Durchsuche

如何在 jQuery 中检查字符串以特定字符串开头/结尾?

JavaScripts Beziehung zu HTML/CSS-Dateien, insbesondere zum Document Object Model (DOM), wird durch die Open-Source-Bibliothek „jQuery“ vereinfacht. Das Durchsuchen und Bearbeiten von HTML-Dateien, das Steuern von Browserereignissen, das Generieren von DOM-Visuals, das Ermöglichen von Ajax-Verbindungen und die plattformübergreifende JavaScript-Programmierung werden mit diesem Paket einfacher.

Um zu überprüfen, ob ein bestimmter String einen Teilstring eines anderen Strings bildet, bietet JavaScript verschiedene String-Funktionen. Daher ist jQuery für diese Aufgabe entbehrlich.

Dennoch werden wir die verschiedenen Möglichkeiten veranschaulichen, um zu überprüfen, ob eine Zeichenfolge mit einer anderen Zeichenfolge beginnt oder endet:

  • startsWith()- und endWith()-Methoden

  • search()-Methode

  • indexOf()-Methode

  • substring()-Methode

  • substr()-Methode

  • slice()-Methode

Angenommen, wir haben eine Zeichenfolge, str = „Hallo, wie geht es dir?“ Unsere Aufgabe besteht darin, festzustellen, ob sie mit startword = „Hi“ beginnt und mit endword = „?“ endet.

Methode 1-str.startsWith()

Die Methode str.startsWith() in JavaScript wird verwendet, um zu überprüfen, ob die Zeichen in der angegebenen Zeichenfolge der Anfang der angegebenen Zeichenfolge sind. Bei dieser Technik wird zwischen Groß- und Kleinschreibung unterschieden.

Die obige Methode lässt zwei Parameter zu, wie bereits erwähnt, wie unten erläutert:

  • searchString: stellt einen obligatorischen Parameter dar und speichert die zu durchsuchende Zeichenfolge.

  • start: Es legt die Position im bereitgestellten String fest, ab der searchString gefunden werden soll. Der Standardwert ist Null.

Grammatik

str.startsWith( searchString , position )

Beispiel

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

Ausgabe

true

Methode 2-endsWith()

Um festzustellen, ob die angegebene Zeichenfolge mit einem Zeichen in einer anderen Zeichenfolge endet, verwenden Sie die JavaScript-Methode str.endsWith().

Die obige Methode verwendet die beiden zuvor erwähnten Parameter, wie unten beschrieben:

  • searchString: Stellt die Zeichenfolge dar, die am Ende der angegebenen Zeichenfolge gefunden werden muss.

  • Länge: Der Längenparameter bestimmt die Größe der Originalzeichenfolge, gegen die die Suchzeichenfolge geprüft werden soll.

Wenn diese Funktion ausgeführt wird und searchString gefunden wird, wird ein boolescher Wert true zurückgegeben, andernfalls wird false zurückgegeben.

Beispiel

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

Ausgabe

false

Methode 3 – string.search()

Die JavaScript-Methode string.search() ist eine integrierte Funktion, die nach Übereinstimmungen zwischen einem regulären Ausdruck und einem angegebenen String-Objekt sucht.

Grammatik

string.search( A )

Beispiel

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));

Ausgabe

-1
-1
3
2

Methode 4: String indexOf()

Die Funktion str.indexOf() in JavaScript findet den Index der ersten Instanz des angegebenen String-Arguments in der angegebenen Zeichenfolge. Das Ergebnis beginnt bei 0.

Grammatik

str.indexOf(searchValue , index)

Beispiel

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

Ausgabe

8

Methode 5: String substring()

Die JavaScript-Methode string.substring() ist eine integrierte Funktion, die einen Teil der angegebenen Zeichenfolge zurückgibt, beginnend am angegebenen Startindex und endend am angegebenen Endindex. Die Indizierung beginnt bei dieser Methode bei Null (0).

Grammatik

string.substring(Startindex, Endindex)

Die Parameter Startindex und Endindex bestimmen das String-Segment, das als Teilstring extrahiert werden soll. Der Endindex-Parameter ist optional.

Wenn die Funktion string.substring() ausgeführt wird, erstellt sie eine neue Zeichenfolge, die einen Teil der ursprünglichen Zeichenfolge darstellt.

Beispiel

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);

Ausgabe

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

Methode 6: String substr()

Mit der Methode str.substr() in JavaScript können Sie ausgehend von einem angegebenen Index eine bestimmte Anzahl von Zeichen aus einer bestimmten Zeichenfolge extrahieren. Diese Methode extrahiert effektiv ein Segment der ursprünglichen Zeichenfolge.

Grammatik

str.substr(start , length)

Beispiel

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

func();

Ausgabe

ow are you?

Methode 7: string.slice()

Die JavaScript-Methode string.slice() wird verwendet, um einen Teil oder ein Segment der bereitgestellten Eingabezeichenfolge zu extrahieren und als neue Zeichenfolge zurückzugeben.

Grammatik

string.slice(startingIndex, endingIndex)

Beispiel

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);

Ausgabe

Hi, H
w a
Hi, How are you?

Beispiel

<!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>

Anleitung

Das bereitgestellte HTML-Skript initialisiert die Textvariable mit dem Wert „Hello, World!“ und verwenden Sie JavaScript, um es auf der Website auszugeben. Es erstellt Schaltflächen-Ereignishandler, die verschiedenen jQuery-Funktionen zugeordnet sind. Die jeweiligen Methoden dieser Schaltflächen werden beim Klicken ausgelöst und die Ausgabekomponente zeigt die Ergebnisse an. Das „Hallo“-Zeichen ist das erste Zeichen, nach dem die Methode „startsWith()“ sucht. Die Methode „endsWith()“ bestimmt, ob die Zeichenfolge mit „World!“ endet. Beim Durchsuchen von Text nach einer vom Benutzer eingegebenen Phrase stellt die Methode search() einen Index des ersten Vorkommens bereit. Der Index einer vom Benutzer eingegebenen Phrase im Text kann mit der Methode indexOf() ermittelt werden. Die Funktionen substring(), substr() und Slice() extrahieren Teilzeichenfolgen aus Text mithilfe vom Benutzer bereitgestellter Start- und Endindizes. Im Allgemeinen werden Textvariablen von Webseiten mithilfe der jQuery-Technologie und JavaScript-Code manipuliert und überprüft, was auch eine Benutzerbeteiligung ermöglicht.

Fazit

  • JavaScript bietet eine Reihe von String-Funktionen, um zu überprüfen, ob ein String ein Teilstring eines anderen Strings ist.

  • Die JavaScript-Methode str.startsWith() wird verwendet, um zu überprüfen, ob die angegebene Zeichenfolge mit den Zeichen in der bereitgestellten Zeichenfolge beginnt. Bei dieser Methode wird zwischen Groß- und Kleinschreibung unterschieden.

  • JavaScript verwendet die Funktion str.endsWith(), um zu bestimmen, ob eine bestimmte Zeichenfolge mit einem Zeichen in der bereitgestellten Zeichenfolge endet.

  • JavaScript bietet eine integrierte Methode namens string.search() zum Suchen nach Übereinstimmungen zwischen einem bestimmten String-Objekt und einem regulären Ausdruck.

  • Die Funktion str.indexOf() von JavaScript findet den Index des ersten Vorkommens des angegebenen Zeichenfolgenparameters in der bereitgestellten Zeichenfolge. Das Ergebnis ist Ground Zero.

  • Die JavaScript-Funktion string.substring() ruft einen Teil der bereitgestellten Zeichenfolge ab, beginnend beim Startindex und endend beim Endindex. Die Indizierung beginnt bei Position Null.

  • Die JavaScript-Methode str.substr() extrahiert eine vorgegebene Anzahl von Zeichen aus der bereitgestellten Zeichenfolge, beginnend bei einem vorgegebenen Index. Im Wesentlichen extrahiert diese Technik einen Teil der Originalzeichenfolge.

  • Sie können einen Teil oder ein Segment einer bestimmten Eingabezeichenfolge mit der JavaScript-Methode string.slice() extrahieren, die den extrahierten Teil als neue Zeichenfolge zurückgibt.

Das obige ist der detaillierte Inhalt vonWie überprüfe ich, ob eine Zeichenfolge in jQuery mit einer bestimmten Zeichenfolge beginnt/endet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen