Suchen und Ersetzen von Instanzen von "{Any-Integer}" mit JavaScript

Question

So als Teil einer Web-App, ich versuche, bestimmte Sätze von Zeichen innerhalb meiner Markup und ersetzen sie durch andere Elemente wie erforderlich (dies konvertiert sie in Symbole und nicht in einfachen Text).

$timeout(function() { 
       $('.collapsible').collapsible(); 


       $(".manaCost:contains('{B}')").html(function (_, html) { 
        return html.replace(/{B}/g, "<i class=\"ms ms-b\"></i>"); 
       }); 

       $(".manaCost:contains('{R}')").html(function (_, html) { 
        return html.replace(/{R}/g, "<i class=\"ms ms-r\"></i>"); 
       }); 

       $(".manaCost:contains('{W}')").html(function (_, html) { 
        return html.replace(/{W}/g, "<i class=\"ms ms-w\"></i>"); 
       }); 

       $(".manaCost:contains('{G}')").html(function (_, html) { 
        return html.replace(/{G}/g, "<i class=\"ms ms-g\"></i>"); 
       }); 

       $(".manaCost:contains('{U}')").html(function (_, html) { 
        return html.replace(/{U}/g, "<i class=\"ms ms-u\"></i>"); 
       }); 

       $(".manaCost:contains('{ANY-INTEGER BETWEEN BRACES}')").html(function (_, html) { 
        return html.replace(/{ANY-INTEGER BETWEEN BRACES}/g, "<i class=\"ms ms-SAME-INTEGER\"></i>"); 
       }); 

}, 0); 

Alle diejenigen, die mit einem Buchstaben in ihnen (zum Beispiel '{B}} gut funktionieren, aber die ganze Zahl ist ein wenig komplizierter. Ich alle Instanzen einer ganzen Zahl finden müssen in Klammern, aber dann müssen auch die gleiche ganze Zahl der Klasse innerhalb des Ersatzelement anzuwenden. Wer weiß, wie ich über diese gehen würde?

Answer 1

so etwas wie /\{(\d)\}/g würde die ganze Zahl erfassen, so dass Sie es mit $1 etc

bekommen

$("#test").html(function (_, html) { 
 
\t return html.replace(/\{(\d)\}/g, "<i class=\"s$1\">$1</i>"); 
 
});

.s2 {color: red} 
 
.s3 {color: blue}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 
    test {2} {3} something 
 
</div>

Als Rory erwähnt, sollten Sie tun auf einmal die ersetzende, und es gibt wirklich keine Notwendigkeit, zu überprüfen, ob jedes Element enthält, was Sie suchen, tun nur

$(".manaCost").html(function(_, html) { 
    return html.replace(/\{B\}/g, "<i class=\"ms ms-b\"></i>") 
      .replace(/\{R\}/g, "<i class=\"ms ms-r\"></i>") 
      .replace(/\{W\}/g, "<i class=\"ms ms-w\"></i>") 
      .... etc 
});