Maison interface Web js tutoriel Introduction aux bases des expressions régulières javascript_compétences javascript

Introduction aux bases des expressions régulières javascript_compétences javascript

May 16, 2016 pm 04:03 PM
expression régulière javascript Bases des expressions régulières

Quels sont les avantages des expressions régulières ? Commençons par comprendre :
Nous utilisons la méthode de traitement des chaînes en js pour écrire une fonction permettant d'extraire les nombres dans la chaîne :

 var str='dgh6a567sdo23ujaloo932';
   function getNumber(obj){
     var arr=[];
     for (var i = 0; i < obj.length; i++) {
       if (obj.charAt(i)>='0'&&obj.charAt(i)<='9'){
           arr.push(obj.charAt(i));
         }
     }
     return arr;
   };
   console.log(getNumber(str));  //["6", "5", "6", "7", "2", "3", "9", "3", "2"]
Copier après la connexion

Nous avons retiré les nombres de la chaîne avec la méthode ci-dessus, mais nous ne sommes pas satisfaits. Ce dont nous avons besoin, c'est de la forme ['6','567','23','932'] et transformons la fonction. :

function getNumber(obj){
    var arr=[];
    var temp='';
    for (var i = 0; i < obj.length; i++) {
      if (obj.charAt(i)>='0'&&obj.charAt(i)<='9'){
          temp+=obj.charAt(i);//现将相邻的数字连接起来
        }
        else{ //每当连接的数字断开时,就在这执行
          if (temp) {
            arr.push(temp);
            temp='';
          }
        };
    }
    if (temp) { //这里的作用是为了显示最后数字的,原因不想解释
            arr.push(temp);
            temp='';
          }
    return arr;
  };
Copier après la connexion

Ensuite, nous utilisons des expressions régulières pour résoudre les fonctions implémentées par cette fonction :

function getNumber2(obj){
    var arr=[];
    var re=/\d+/g;
    arr.push(obj.match(re));
    return arr;
  };
Copier après la connexion

Jetons un aperçu complet des résultats en cours du programme :

<!DOCTYPE>
<html>
<head>
  <meta charset='utf-8'>
  <title></title>
</head>
<script type="text/javascript">
window.onload=function(){
  var str='dgh6a567sdo23ujaloo932';
  /*function getNumber(obj){
    var arr=[];
    for (var i = 0; i < obj.length; i++) {
      if (obj.charAt(i)>='0'&&obj.charAt(i)<='9'){
          arr.push(obj.charAt(i));
        }
    }
    return arr;
  };*/
  function getNumber(obj){
    var arr=[];
    var temp='';
    for (var i = 0; i < obj.length; i++) {
      if (obj.charAt(i)>='0'&&obj.charAt(i)<='9'){
          temp+=obj.charAt(i);//现将相邻的数字连接起来
        }
        else{ //每当连接的数字断开时,就在这执行
          if (temp) {
            arr.push(temp);
            temp='';
          }
        };
    }
    if (temp) { //这里的作用是为了显示最后数字的,原因不想解释
            arr.push(temp);
            temp='';
          }
    return arr;
  };
  function getNumber2(obj){
    var arr=[];
    var re=/\d+/g;
    arr.push(obj.match(re));
    return arr;
  };
  console.log(getNumber(str));
  console.log(getNumber2(str)); 
};
</script>
<body>
</body>
</html>
Copier après la connexion

Nous pouvons voir dans l'exemple ci-dessus que la méthode des expressions régulières a le même effet, mais le code est plus court et plus efficace. C'est l'avantage des expressions régulières
. Les expressions régulières sont créées pour traiter les chaînes plus efficacement. Elles sont identiques aux méthodes de traitement de chaînes, mais plus efficaces et concises (les expressions régulières ne peuvent traiter que les chaînes)

Étudions systématiquement quelques méthodes courantes de régularisation :

Avant cela, parlons de la façon d'écrire des expressions régulières. Les expressions régulières sont les mêmes que les autres objets array(), object(), Date(), etc., et elles ont toutes des méthodes d'initialisation
var re=/Vous devez écrire les éléments correspondants ici. Si vous ne l'écrivez pas, vous vous concentrerez simplement sur le symbole/; //Il s'agit d'une simple création d'un objet régulier, je l'utiliserai directement dans les articles suivants.
var re=new RegExp(); //Cette façon de créer est également possible, tout le monde le sait, mais la différence avec l'abréviation est que le passage des paramètres est un peu différent

(1)test

Signification : faites correspondre régulièrement les chaînes, retournez vrai lorsque la correspondance est réussie, sinon, retournez faux
; Syntaxe : re.test(string);
Parlons d'abord des caractères d'échappement :
/s espace /S non-espace /d nombre /D non-chiffre /w caractère (lettre, chiffre, trait de soulignement) /W non-caractère
Par exemple : Déterminez si une chaîne est composée uniquement de nombres

<!DOCTYPE>
<html>
<head>
  <meta charset='utf-8'> 
  <title></title>
</head>
<script type="text/javascript">
window.onload=function(){
  var str='dgh6a567sdo23ujaloo932';
  var str2='123456';
  function allNumber(obj){
    var re=/\D/;//定义正则对象匹配非数字,只要有不是数字的就是匹配结束返回结果
    if (re.test(obj)) {
      alert('不全是数字');
    }
    else{
      alert('全是数字');
    };
  };
  allNumber(str);
  allNumber(str2);

};
</script>
<body>
</body>
</html>

Copier après la connexion

(2) recherche

Signification : faire correspondre régulièrement les chaînes. Lorsque la correspondance est réussie, la position de la correspondance réussie est renvoyée. Sinon, -1 est renvoyée ; la même fonction que indexof() dans la méthode de traitement des chaînes. Syntaxe : string.search(re);
[color=Red]Remarque : L'expression régulière est sensible à la casse par défaut. Pour la rendre insensible à la casse, ajoutez l'indicateur i ;[/color]
. Exemple de correspondance régulière insensible à la casse d'un certain caractère
dans une chaîne

<!DOCTYPE>
<html>
<head>
  <meta charset='utf-8'> 
  <title></title>
</head>
<script type="text/javascript">
window.onload=function(){
  var str='dgh6b567sdo23ujaloo932';
  function searchStr(obj){
    var re=/B/i;//定义正则对象匹配b字符,不区分大小写
    alert(obj.search(re));  
  };
  searchStr(str);
};
</script>
<body>
</body>
</html>
Copier après la connexion

(3) correspondance

Signification : faire correspondre régulièrement les chaînes. Lorsque la correspondance est réussie, un tableau de correspondances réussies sera renvoyé. Sinon, Null

sera renvoyé. Syntaxe : string.match(re);
[color=Red] Remarque : La valeur par défaut de l'expression régulière est que tant que la correspondance réussit, elle se terminera immédiatement et renverra la valeur correspondante, et la correspondance ne continuera pas. Si vous voulez tous les trouver, vous devez ajouter g (correspondance globale) [/color]
Exemple : faites correspondre des nombres consécutifs dans une chaîne et stockez-les dans un tableau (les nombres consécutifs sont utilisés comme élément dans le tableau)

Le " " dans le programme signifie que le match se produit au moins une fois. Pourquoi faisons-nous cela ?

Nous avons mentionné plus tôt que "la valeur par défaut dans les expressions régulières est que tant que la correspondance réussit, elle se terminera immédiatement et renverra la valeur correspondante. Elle se terminera ensuite lorsqu'un nombre correspondra dans la chaîne et qu'un nombre sera renvoyé". au tableau À ce stade, nous avons besoin d’utiliser g pour le faire correspondre à chaque élément.
Avez-vous déjà découvert qu'il n'existe pas de nombre défini de nombres consécutifs ? Vous pouvez utiliser " " pour répondre au nombre dynamique de nombres.

<!DOCTYPE>
<html>
<head>
  <meta charset='utf-8'> 
  <title></title>
</head>
<script type="text/javascript">
window.onload=function(){
  var str='dgh6b567sdo23ujaloo932';
  function searchStr1(obj){
    var re=/\d/;  
    return obj.match(re);
  };
  function searchStr2(obj){
    var re=/\d/g;  
    return obj.match(re);
  };
  function searchStr3(obj){
    var re=/\d\d/g;//全局匹配2位数  
    return obj.match(re);
  };
  function searchStr4(obj){
    var re=/\d+/g;  
    return obj.match(re);
  };
  console.log(searchStr1(str));
  console.log(searchStr2(str));
  console.log(searchStr3(str));
  console.log(searchStr4(str));

};
</script>
<body>
</body>
</html>

Copier après la connexion

(4)remplacer

Signification : faire correspondre régulièrement les chaînes, et lorsque la chaîne correspondante avec succès est remplacée par une nouvelle chaîne

Syntaxe : string.replace(re);
Exemple : Remplacez tous les a de la chaîne par b

<!DOCTYPE>
<html>
<head>
 <meta charset='utf-8'> 
 <title></title>
</head>
<script type="text/javascript">
window.onload=function(){
 var str='daah6b5a7sdo23ujaloo932';
 function replaceStr(obj){
  var re=/a/g; //全局匹配a
  return obj.replace(re,'b');
 };
 console.log(replaceStr(str));
};
</script>
<body>
</body>
</html>
Copier après la connexion
J'écrirai ici pour le moment et je ferai le suivi des mises à jour. . .

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Apr 04, 2025 pm 02:42 PM

Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...

Qui est payé plus de python ou de javascript? Qui est payé plus de python ou de javascript? Apr 04, 2025 am 12:09 AM

Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript? Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript? Apr 04, 2025 pm 05:09 PM

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...

Démystifier javascript: ce qu'il fait et pourquoi c'est important Démystifier javascript: ce qu'il fait et pourquoi c'est important Apr 09, 2025 am 12:07 AM

JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.

La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents? La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents? Apr 04, 2025 pm 05:12 PM

Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...

Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido?
ou:
Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido? Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido? ou: Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido? Apr 04, 2025 pm 05:36 PM

La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...

PowerPoint peut-il exécuter JavaScript? PowerPoint peut-il exécuter JavaScript? Apr 01, 2025 pm 05:17 PM

JavaScript peut être exécuté dans PowerPoint et peut être implémenté en appelant des fichiers JavaScript externes ou en intégrant des fichiers HTML via VBA. 1. Pour utiliser VBA pour appeler les fichiers JavaScript, vous devez activer les macros et avoir des connaissances en programmation VBA. 2. ENCHED des fichiers HTML contenant JavaScript, qui sont simples et faciles à utiliser mais sont soumis à des restrictions de sécurité. Les avantages incluent les fonctions étendues et la flexibilité, tandis que les inconvénients impliquent la sécurité, la compatibilité et la complexité. En pratique, l'attention doit être accordée à la sécurité, à la compatibilité, aux performances et à l'expérience utilisateur.

JavaScript est-il difficile à apprendre? JavaScript est-il difficile à apprendre? Apr 03, 2025 am 12:20 AM

Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.

See all articles