dynamic régulière - Javascript Regexp génération dynamique à partir de variables?





expression js (5)


Vous devez renoncer au littéral regex et utiliser le constructeur d'objet, où vous pouvez passer l'expression rationnelle comme une chaîne.

var regex = new RegExp(pattern1+'|'+pattern2, 'gi');
str.match(regex);

Cette question a déjà une réponse ici:

Comment construire deux motifs regex en un seul?

Par exemple j'ai un motif long et un plus petit, je dois mettre plus petit devant un long.

var pattern1 = ':\(|:=\(|:-\(';
var pattern2 = ':\(|:=\(|:-\(|:\(|:=\(|:-\('
str.match('/'+pattern1+'|'+pattern2+'/gi');

Cela ne fonctionne pas. Quand je concatène des chaînes, toutes les barres obliques ont disparu.




Utilisez le ci-dessous:

var regEx = new RegExp(pattern1+'|'+pattern2, 'gi');

str.match(regEx);



Vous devez utiliser RegExp :

str.match(new RegExp(pattern1+'|'+pattern2, 'gi'));

Quand je concatène des chaînes, toutes les barres obliques ont disparu.

Si vous avez une barre oblique inverse dans votre pattern pour échapper un caractère regex spécial, (comme \( ), vous devez utiliser deux antislashs dans la chaîne (car \ est le caractère d'échappement dans une chaîne): new RegExp('\\(') serait le même que /\(/ .

Donc, vos modèles doivent devenir:

var pattern1 = ':\\(|:=\\(|:-\\(';
var pattern2 = ':\\(|:=\\(|:-\\(|:\\(|:=\\(|:-\\(';



Le constructeur RegExp crée un objet d'expression régulière pour le texte correspondant avec un motif.

    var pattern1 = ':\\(|:=\\(|:-\\(';
    var pattern2 = ':\\(|:=\\(|:-\\(|:\\(|:=\\(|:-\\(';
    var regex = new RegExp(pattern1 + '|' + pattern2, 'gi');
    str.match(regex);

Le code ci-dessus fonctionne parfaitement pour moi ...




L'homme de paille

J'ai besoin de savoir combien de fois un bouton a été cliqué et de faire quelque chose à chaque troisième clic ...

Solution assez évidente

// Declare counter outside event handler's scope
var counter = 0;
var element = document.getElementById('button');

element.addEventListener("click", function() {
  // Increment outside counter
  counter++;

  if (counter === 3) {
    // Do something every third time
    console.log("Third time's the charm!");

    // Reset counter
    counter = 0;
  }
});
<button id="button">Click Me!</button>

Maintenant, cela fonctionnera, mais cela empiétera sur la portée externe en ajoutant une variable, dont le seul but est de garder une trace du nombre. Dans certains cas, cela serait préférable, car votre application externe pourrait avoir besoin d'accéder à ces informations. Mais dans ce cas, nous ne modifions que le comportement de chaque troisième clic. Il est donc préférable de placer cette fonctionnalité dans le gestionnaire d'événements .

Considérez cette option

var element = document.getElementById('button');

element.addEventListener("click", (function() {
  // init the count to 0
  var count = 0;

  return function(e) { // <- This function becomes the click handler
    count++; //    and will retain access to the above `count`

    if (count === 3) {
      // Do something every third time
      console.log("Third time's the charm!");

      //Reset counter
      count = 0;
    }
  };
})());
<button id="button">Click Me!</button>

Notez quelques petites choses ici.

Dans l'exemple ci-dessus, j'utilise le comportement de fermeture de JavaScript. Ce comportement permet à n'importe quelle fonction d'avoir accès à la portée dans laquelle elle a été créée, indéfiniment. Pour pratiquement l'appliquer, j'appelle immédiatement une fonction qui renvoie une autre fonction et, comme la fonction que je retourne a accès à la variable de comptage interne (en raison du comportement de fermeture expliqué ci-dessus), il en résulte une portée privée pour l'utilisation par le résultat. fonction ... Pas si simple? Diluons-le ...

Une simple fermeture d'une ligne

//          _______________________Immediately invoked______________________
//         |                                                                |
//         |        Scope retained for use      ___Returned as the____      |
//         |       only by returned function   |    value of func     |     |
//         |             |            |        |                      |     |
//         v             v            v        v                      v     v
var func = (function() { var a = 'val'; return function() { alert(a); }; })();

Toutes les variables en dehors de la fonction renvoyée sont disponibles pour la fonction renvoyée, mais elles ne le sont pas directement pour l'objet fonction renvoyé ...

func();  // Alerts "val"
func.a;  // Undefined

Trouver? Ainsi, dans notre exemple principal, la variable count est contenue dans la fermeture et toujours disponible pour le gestionnaire d'événements. Il conserve donc son état d'un clic à l'autre.

De plus, cet état de variable privée est entièrement accessible, à la fois pour les lectures et pour l'affectation à ses variables privées.

Voilà; vous intégrez maintenant pleinement ce comportement.

Article de blog complet (y compris les considérations relatives à jQuery)





javascript regex dynamic