Comment vérifier si une chaîne commence/se termine par une chaîne spécifique dans jQuery ?

La relation de JavaScript avec les fichiers HTML/CSS, en particulier avec le modèle d'objet de document (DOM), est facilitée grâce à la bibliothèque open source appelée « jQuery ». La traversée et la manipulation de fichiers HTML, le contrôle des événements du navigateur, la génération de visuels DOM, la facilitation des connexions Ajax et la programmation JavaScript multiplateforme sont tous facilités avec ce package.

Pour vérifier si une chaîne spécifique forme une sous-chaîne d'une autre chaîne, JavaScript fournit une variété de fonctions de chaîne. Par conséquent, jQuery n’est pas nécessaire pour cette tâche.

Néanmoins, nous illustrerons les différentes manières de vérifier si une chaîne commence ou se termine par une autre chaîne :

• Méthodes startsWith() et endWith()

• méthode search()

• Méthode indexOf()

Méthode

• substring()

• Méthode substr()

• Méthode slice()

Supposons que nous ayons une chaîne str = "Salut, comment vas-tu ?" Notre tâche est de déterminer si elle commence par startword = "Salut" et se termine par endword = "?"

Méthode 1-str.startsWith()

La méthode str.startsWith() en JavaScript est utilisée pour vérifier si les caractères de la chaîne donnée sont le début de la chaîne spécifiée. Cette technique est sensible à la casse, ce qui signifie qu'elle fait la distinction entre les lettres majuscules et les lettres minuscules.

La méthode ci-dessus admet deux paramètres, comme mentionné précédemment, comme expliqué ci-dessous :

• searchString : constitue un paramètre obligatoire et stocke la chaîne à rechercher.

• start : Il établit la position dans la chaîne fournie à partir de laquelle searchString doit être trouvé. La valeur par défaut est zéro.

Grammaire

str.startsWith( searchString , position )

Exemple

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

Sortie

true

Méthode 2-endsWith()

Pour déterminer si la chaîne fournie se termine par un caractère dans une autre chaîne, utilisez la méthode JavaScript str.endsWith().

La méthode ci-dessus prend les deux paramètres mentionnés précédemment, comme décrit ci-dessous :

• searchString : représente la chaîne qui doit être trouvée à la fin de la chaîne donnée.

• length : Le paramètre length détermine la taille de la chaîne d'origine par rapport à laquelle la chaîne de recherche doit être vérifiée.

Lorsque cette fonction est exécutée, si searchString est trouvé, une valeur booléenne true est renvoyée sinon, false est renvoyée ;

Exemple

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

Sortie

false

Méthode 3 - string.search()

La méthode JavaScript string.search() est une fonction intégrée qui recherche des correspondances entre une expression régulière et un objet chaîne spécifié.

Grammaire

string.search( A )

Exemple

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

Sortie

-1
-1
3
2

Méthode 4 : chaîne indexOf()

La fonction str.indexOf() en JavaScript trouve l'index de la première instance de l'argument de chaîne fourni dans la chaîne donnée. Le résultat commence à 0.

Grammaire

str.indexOf(searchValue , index)

Exemple

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

Sortie

8

Méthode 5 : Sous-chaîne de chaîne()

La méthode JavaScript string.substring() est une fonction intégrée qui renvoie une partie de la chaîne donnée, commençant à l'index de début spécifié et se terminant à l'index de fin fourni. L'indexation dans cette méthode commence à zéro (0).

Grammaire

string.substring(Startindex, Endindex)

Les paramètres Startindex et Endindex déterminent le segment de chaîne à extraire en tant que sous-chaîne. Le paramètre Endindex est facultatif.

Lorsque la fonction string.substring() est exécutée, elle crée une nouvelle chaîne qui représente une partie de la chaîne d'origine.

Exemple

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

Sortie

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

Méthode 6 : Chaîne substr()

La méthode str.substr() en JavaScript vous permet d'extraire un nombre spécifique de caractères d'une chaîne donnée à partir d'un index spécifié. Cette méthode extrait efficacement un segment de la chaîne d'origine.

Grammaire

str.substr(start , length)

Exemple

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

func();

Sortie

ow are you?

Méthode 7 : string.slice()

La méthode JavaScript string.slice() est utilisée pour extraire une partie ou une tranche de la chaîne d'entrée fournie et la renvoyer sous la forme d'une nouvelle chaîne.

Grammaire

string.slice(startingIndex, endingIndex)

Exemple

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

Sortie

Hi, H
w a
Hi, How are you?

Exemple

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

Instructions

Le script HTML fourni initialise la variable texte avec la valeur "Hello, World!" et utilisez JavaScript pour le publier sur le site Web. Il crée des gestionnaires d'événements de boutons associés à diverses fonctions jQuery. Les méthodes respectives de ces boutons sont déclenchées lorsque vous cliquez dessus et le composant de sortie affiche les résultats. Le caractère « Bonjour » est le premier caractère recherché par la méthode startWith(). La méthode endWith() détermine si la chaîne se termine par « World ! Lors de la recherche dans le texte d'une expression fournie par l'utilisateur, la méthode search() fournit un index de la première occurrence. L'index d'une phrase fournie par l'utilisateur dans le texte peut être trouvé à l'aide de la méthode indexOf(). Les fonctions substring(), substr() et slice() extraient les sous-chaînes du texte à l'aide des indices de début et de fin fournis par l'utilisateur. Généralement, les variables de texte des pages Web sont manipulées et inspectées à l'aide de la technologie jQuery et du code JavaScript, qui permettent également la participation des utilisateurs.

Conclusion

• JavaScript fournit une série de fonctions de chaîne pour vérifier si une chaîne est une sous-chaîne d'une autre chaîne.

• La méthode JavaScript str.startsWith() est utilisée pour vérifier si la chaîne spécifiée commence par les caractères de la chaîne fournie. Cette méthode est sensible à la casse, ce qui signifie qu'elle fait la distinction entre les lettres majuscules et minuscules.

• JavaScript utilise la fonction str.endsWith() pour déterminer si une chaîne donnée se termine par un caractère dans la chaîne fournie.

• JavaScript fournit une méthode intégrée appelée string.search() pour rechercher des correspondances entre un objet chaîne donné et une expression régulière.

• La fonction str.indexOf() de JavaScript trouve l'index de la première occurrence du paramètre de chaîne fourni dans la chaîne fournie. Le résultat est le point zéro.

• La fonction JavaScript string.substring() récupère une partie de la chaîne fournie, en commençant à l'index de début et en se terminant à l'index de fin. L'indexation commence à la position zéro.

• La méthode JavaScript str.substr() extrait un nombre prédéterminé de caractères de la chaîne fournie, en commençant à un index prédéterminé. Essentiellement, cette technique extrait une partie de la chaîne d'origine.

• Vous pouvez extraire une partie ou une tranche d'une chaîne d'entrée donnée à l'aide de la méthode JavaScript string.slice(), qui renvoie la partie extraite sous la forme d'une nouvelle chaîne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!