OUJOOD.COM
Définition et utilisation de la méthode substring()
JavaScript cours tutorialLa méthode substring() est une fonction native JavaScript qui extrait les caractères d'une chaîne entre deux indices spécifiés et retourne une nouvelle sous-chaîne. Cette méthode est essentielle pour la manipulation de texte et fait partie des outils fondamentaux du traitement de chaînes en JavaScript.
Cette méthode extrait les caractères dans une chaîne entre l'indice « debut » et « fin », sans compter « fin » lui-même. Cela signifie que l'indice de fin est exclusif, tandis que l'indice de début est inclusif.
Particularité importante : Si l'indice « debut » est supérieur à « fin », cette méthode inverse automatiquement les deux arguments. Par exemple, str.substring(1,4) est strictement équivalent à str.substring(4,1). Cette fonctionnalité évite les erreurs et garantit toujours un résultat cohérent.
Si « debut » ou « fin » est inférieur à 0, la valeur est automatiquement traitée comme 0. Contrairement à slice(), substring() ne supporte pas les indices négatifs pour compter depuis la fin de la chaîne.
Remarque cruciale : La méthode substring() ne modifie jamais la chaîne d'origine. Elle retourne une nouvelle chaîne, laissant la chaîne source intacte. C'est une méthode non-destructive conforme au principe d'immutabilité des strings en JavaScript.
Exemple : Extraire des caractères d'une chaîne
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> Exemple fonction substring </title>
</head>
<body>
<p id="dmo">Cliquer le bouton Voir pour extraire les caractères</p>
<button onclick="myFunction()"> Voir </button>
<script>
function myFunction()
{
// Déclaration de la chaîne à analyser
var chaine = "Bonjour le monde!";
// substring(1,5) extrait de l'index 1 (inclus) à 5 (exclu)
// Index : B=0, o=1, n=2, j=3, o=4, u=5...
// Résultat : caractères aux positions 1,2,3,4 = "onjo"
var resultat = chaine.substring(1,5);
// Affichage du résultat dans l'élément HTML
document.getElementById("dmo").innerHTML=resultat;
}
</script>
</body>
</html>
Résultat du code ci-dessus :
onjo
Explication détaillée : Dans cet exemple, substring(1,5) extrait les caractères de l'index 1 (inclus) jusqu'à l'index 5 (exclu). Le caractère à l'index 0 ('B') n'est pas inclus dans le résultat, et l'extraction s'arrête juste avant l'index 5 (le caractère 'u' n'est donc pas inclus). On obtient donc "onjo" qui correspond aux indices 1, 2, 3 et 4.
Appui de navigateur
La méthode substring() est prise en charge dans tous les principaux navigateurs, y compris les versions les plus anciennes. C'est une méthode standardisée ECMAScript depuis la version 1.0, garantissant une compatibilité totale.
Syntaxe
string.substring(debut,fin)
Valeurs de paramètre
| Paramètre | Description |
|---|---|
| debut | Obligatoire. L'index de position où commencer l'extraction. Le premier caractère est à l'index 0. Si supérieur à la longueur de la chaîne, retourne une chaîne vide. |
| fin | Optionnel. L'index de position où arrêter l'extraction (ce caractère n'est PAS inclus dans le résultat). Si omis, extrait tous les caractères jusqu'à la fin de la chaîne. |
Valeur de retour
| Type | Description |
|---|---|
| String | Une nouvelle chaîne de caractères contenant la portion extraite. La chaîne originale reste inchangée. |
Détails techniques
| Version JavaScript : | 1.0 (supportée depuis les premières versions de JavaScript) |
|---|
Différence entre substring(), slice() et substr()
À noter : La méthode substring() utilise des indices de début et de fin, tandis que substr() (maintenant dépréciée) utilise un indice de début et une longueur. La méthode slice() est similaire à substring() mais accepte les indices négatifs pour compter depuis la fin. Il est recommandé d'utiliser substring() ou slice() dans le code moderne pour garantir la pérennité de vos applications.
Autres Exemples Pratiques
Exemple : Extraction depuis une position jusqu'à la fin de la chaîne
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> Exemple fonction substring </title>
</head>
<body>
<p id="dmo">Cliquer le bouton Voir pour extraire les caractères</p>
<button onclick="myFunction()"> Voir </button>
<script>
function myFunction()
{
var chaine = "Bonjour le monde!";
// Avec un seul paramètre, substring() extrait du début spécifié jusqu'à la fin
// substring(8) commence à l'index 8 et va jusqu'au dernier caractère
// Index 8 correspond à 'l' dans "Bonjour le monde!"
var resultat = chaine.substring(8);
document.getElementById("dmo").innerHTML=resultat;
}
</script>
</body>
</html>
Résultat : "le monde!" (tous les caractères à partir de l'index 8 jusqu'à la fin)
Exemple : Inversion automatique des indices
Si l'indice « debut » est supérieur à « fin », la méthode inverse automatiquement les deux arguments. Cette fonctionnalité unique à substring() garantit toujours un résultat exploitable.
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> Exemple fonction substring </title>
</head>
<body>
<p id="dmo">Cliquer le bouton Voir pour extraire les caractères</p>
<button onclick="myFunction()"> Voir </button>
<script>
function myFunction()
{
var chaine = "Bonjour le monde!";
// substring(4,1) a le début > fin, donc JavaScript inverse automatiquement
// Cela devient équivalent à substring(1,4)
// Extrait les caractères aux positions 1, 2, 3 = "onj"
var resultat = chaine.substring(4,1);
document.getElementById("dmo").innerHTML=resultat;
}
</script>
</body>
</html>
Résultat : "onj" (équivalent exact à substring(1,4) grâce à l'inversion automatique)
Exemple : Gestion des indices négatifs
Si l'indice « debut » ou « fin » est inférieur à 0, il est automatiquement traité comme 0 et l'extraction commence au tout début de la chaîne. Cette gestion diffère de slice() qui interprète les indices négatifs.
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> Exemple fonction substring </title>
</head>
<body>
<p id="dmo">Cliquer le bouton Voir pour extraire les caractères</p>
<button onclick="myFunction()"> Voir </button>
<script>
function myFunction()
{
var chaine = "Bonjour le monde!";
// L'indice -3 est converti en 0 automatiquement
// substring(-3,7) devient substring(0,7)
// Extrait du tout début (index 0) jusqu'à l'index 7 (exclu)
var resultat = chaine.substring(-3,7);
document.getElementById("dmo").innerHTML=resultat;
}
</script>
</body>
</html>
Résultat : "Bonjour" (extraction de l'index 0 à 7, les 7 premiers caractères)
Exemple : Extraction du premier caractère
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> Exemple fonction substring </title>
</head>
<body>
<p id="dmo">Cliquer le bouton Voir pour extraire les caractères</p>
<button onclick="myFunction()"> Voir </button>
<script>
function myFunction()
{
var chaine = "Bonjour le monde!";
// substring(0,1) extrait uniquement le premier caractère
// De l'index 0 (inclus) à l'index 1 (exclu)
// Alternative : on peut aussi utiliser chaine.charAt(0) ou chaine[0]
var resultat = chaine.substring(0,1);
document.getElementById("dmo").innerHTML=resultat;
}
</script>
</body>
</html>
Résultat : "B" (le tout premier caractère de la chaîne)
Exemple : Extraction du dernier caractère
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> Exemple fonction substring </title>
</head>
<body>
<p id="dmo">Cliquer le bouton Voir pour extraire les caractères</p>
<button onclick="myFunction()"> Voir </button>
<script>
function myFunction()
{
var chaine = "Bonjour le monde!";
// chaine.length donne la longueur totale (17 caractères)
// chaine.length-1 donne l'index du dernier caractère (16)
// substring(16) extrait du caractère 16 jusqu'à la fin
var resultat = chaine.substring(chaine.length-1);
document.getElementById("dmo").innerHTML=resultat;
}
</script>
</body>
</html>
Résultat : "!" (le dernier caractère de la chaîne)
Conseil pratique : Pour plus de flexibilité et de maintenabilité, utilisez toujours chaine.length-1 plutôt qu'un index fixe pour extraire le dernier caractère. Cela fonctionne quelle que soit la longueur de la chaîne.
Cas d'usage pratique : Extraction de nom de domaine
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> Exemple pratique substring </title>
</head>
<body>
<p id="dmo">Cliquer pour extraire le nom de domaine</p>
<button onclick="myFunction()"> Extraire </button>
<script>
function extraireDomaine(url) {
// Trouver la position de "://" dans l'URL
// indexOf() retourne l'index de début, on ajoute 3 pour passer "://"
var debut = url.indexOf("://") + 3;
// Chercher le prochain "/" après le protocole
// C'est là que commence le chemin de la page
var fin = url.indexOf("/", debut);
// Si aucun "/" n'est trouvé (indexOf retourne -1)
// Cela signifie qu'il n'y a pas de chemin, juste le domaine
if (fin === -1) fin = url.length;
// Extraire la partie entre le protocole et le chemin
return url.substring(debut, fin);
}
function myFunction()
{
var url = "https://www.exemple.com/page/index.html";
// Appeler la fonction d'extraction personnalisée
var domaine = extraireDomaine(url);
document.getElementById("dmo").innerHTML = "Domaine : " + domaine;
}
</script>
</body>
</html>
Résultat : "www.exemple.com"
Cet exemple montre une utilisation pratique et réelle de substring() pour extraire le nom de domaine d'une URL complète. Cette technique combine plusieurs méthodes : indexOf() pour localiser les positions et substring() pour l'extraction. C'est un cas d'usage fréquent dans le développement web pour analyser et manipuler des URLs.
Par carabde 30 mars 2014 - Mis à jour le 16 novembre 2025