Voorbeeld van een reguliere expressie: een Wiki-parser

Flash Player 9 of hoger, Adobe AIR 1.0 of hoger

Dit eenvoudige conversievoorbeeld van Wiki-tekst geeft een aantal toepassingen voor reguliere expressies:

  • Het omzetten van tekstregels die overeenkomen met een Wiki-bronpatroon in de juiste tekenreeksen in HTML-indeling.

  • Een reguliere expressie gebruiken om URL-patronen in HTML-tags <a> voor hyperlinks om te zetten.

  • Een reguliere expressie gebruiken om tekenreeksen in Amerikaanse dollar (zoals "$9.95") om te zetten in tekenreeksen met het euroteken (zoals "8.24 €").

Zie www.adobe.com/go/learn_programmingAS3samples_flash_nl als u de toepassingsbestanden voor dit voorbeeld wilt downloaden. De toepassingsbestanden van WikiEditor vindt u in de map Samples/WikiEditor. De toepassing bestaat uit de volgende bestanden:

Bestand

Beschrijving

WikiEditor.mxml

of

WikiEditor.fla

Het hoofdtoepassingsbestand in Flash (FLA) of Flex (MXML).

com/example/programmingas3/regExpExamples/WikiParser.as

Een klasse die methoden bevat die gebruikmaken van reguliere expressies om Wiki-tekstpatronen om te zetten in gelijkwaardige tekst in HTML-indeling.

com/example/programmingas3/regExpExamples/URLParser.as

Een klasse die methoden bevat die gebruikmaken van reguliere expressies om URL-tekenreeksen om te zetten in HTML-tags <a> voor hyperlinks.

com/example/programmingas3/regExpExamples/CurrencyConverter.as

Een klasse die methoden bevat die gebruikmaken van reguliere expressies om tekenreeksen met Amerikaanse dollar om te zetten in tekenreeksen met het euroteken.

Klasse WikiParser definiëren

De klasse WikiParser bevat methoden waarmee Wiki-invoertekst wordt omgezet naar gelijkwaardige tekst in HTML-indeling. Dit is geen bijzonder krachtige Wiki-conversietoepassing, maar deze toont wel enkele geschikte toepassingen van reguliere expressies voor patroonovereenkomst en tekenreeksomzetting.

De constructorfunctie initialiseert in combinatie met de methode setWikiData() als volgt een voorbeeldtekenreeks van Wiki-invoertekst:

public function WikiParser() 
{ 
    wikiData = setWikiData(); 
}

Wanneer de gebruiker klikt op de knop Test in de voorbeeldtoepassing, roept deze de methode parseWikiString() van het WikiParser-object aan. Deze methode roept een aantal andere methoden aan, die omgekeerd de tekenreeks in HTML-indeling samenstellen.

public function parseWikiString(wikiString:String):String 
{ 
    var result:String = parseBold(wikiString); 
    result = parseItalic(result); 
    result = linesToParagraphs(result); 
    result = parseBullets(result); 
    return result; 
}

Elk van de aangeroepen methoden, parseBold(), parseItalic(), linesToParagraphs() en parseBullets(), maakt gebruik van de methode replace() van de tekenreeks. Hiermee kunnen overeenkomende patronen, die gedefinieerd zijn door een reguliere expressie, worden vervangen en Wiki-invoertekst vervolgens worden omgezet in tekst in HTML-indeling.

Vetgedrukte en cursieve patronen omzetten

De methode parseBold() zoekt naar een vetgedrukt Wiki-tekstpatroon (zoals '''foo''') en zet dit als volgt om in een gelijkwaardig patroon in HTML-indeling (zoals <b>foo</b>):

private function parseBold(input:String):String 
{ 
    var pattern:RegExp = /'''(.*?)'''/g; 
    return input.replace(pattern, "<b>$1</b>"); 
}

Houd er rekening mee dat het gedeelte (.?*) van de reguliere expressie overeenkomt met een willekeurig aantal tekens (*) tussen de twee gedefinieerde ''' patronen. De kwantor? maakt de overeenkomst nongreedy, zodat voor een tekenreeks als '''aaa''' bbb '''ccc''' de eerste overeenkomende tekenreeks '''aaa''' is in plaats van de complete tekenreeks (die begint en eindigt met het patroon ''').

De ronde haakjes in de reguliere expressie definiëren een vastgelegde groep, en de methode replace() verwijst naar deze groep door gebruik te maken van de code $1 in de vervangende tekenreeks. De markering g (global) in de reguliere expressie zorgt ervoor dat de methode replace() alle overeenkomsten in de tekenreeks (dus niet alleen de eerste) vervangt.

De methode parseItalic() werkt hetzelfde als de methode parseBold(), behalve dat deze controleert op twee apostroffen ('') als scheidingsteken voor cursief gedrukte tekst (in plaats van drie):

private function parseItalic(input:String):String 
{ 
    var pattern:RegExp = /''(.*?)''/g; 
    return input.replace(pattern, "<i>$1</i>"); 
}

Bullet-patronen omzetten

Zoals uit het onderstaande voorbeeld blijkt, zoekt de methode parseBullet() naar Wiki-regelpatroon met bullets (zoals * foo) en zet deze in een vergelijkbaar patroon in HTML-indeling (zoals <li>foo</li>):

private function parseBullets(input:String):String 
{ 
    var pattern:RegExp = /^\*(.*)/gm; 
    return input.replace(pattern, "<li>$1</li>"); 
}

Het symbool ^ aan het begin van de reguliere expressie komt overeen met het begin van een regel. De markering m (multiline) in de reguliere expressie zorgt ervoor dat de reguliere expressie overeenkomt met het symbool ^ aan het begin van de regel, in plaats van aan het begin van de tekenreeks.

Het patroon \* komt overeen met een asteriskteken (de backslash wordt gebruikt om een letterlijke asterisk aan te geven in plaats van een kwantor *).

De ronde haakjes in de reguliere expressie definiëren een vastgelegde groep, en de methode replace() verwijst naar deze groep door gebruik te maken van de code $1 in de vervangende tekenreeks. De markering g (global) in de reguliere expressie zorgt ervoor dat de methode replace() alle overeenkomsten in de tekenreeks (dus niet alleen de eerste) vervangt.

Wiki-patronen voor alinea's converteren

De methode linesToParagraphs() converteert elke regel in de ingevoerde Wiki-tekenreeks naar een HTML-tag <p> voor alinea's. Deze regels in de methode verwijderen lege regels van de ingevoerde Wiki-tekenreeks:

var pattern:RegExp = /^$/gm; 
var result:String = input.replace(pattern, "");

De symbolen ^ en $ van de reguliere expressie komen overeen met het begin en einde van een regel. De markering m (multiline) in de reguliere expressie zorgt ervoor dat de reguliere expressie overeenkomt met het ^-symbool aan het begin van de regel, in plaats van het begin van de tekenreeks.

De methode replace() vervangt alle overeenkomende subtekenreeksen (lege regels) door een lege tekenreeks (""). De markering g (global) in de reguliere expressie zorgt ervoor dat de methode replace() alle overeenkomsten in de tekenreeks (dus niet alleen de eerste) vervangt.

URL's omzetten in HTML-tags <a >

Wanneer de gebruiker in de voorbeeldtoepassing op de knop Test klikt, nadat hij het selectievakje urlToATag heeft ingeschakeld, roept de toepassing de statische methode URLParser.urlToATag() aan om URL-tekenreeksen om te zetten van de ingevoerde Wiki-tekenreeks in HTML-tags <a>.

var protocol:String = "((?:http|ftp)://)"; 
var urlPart:String = "([a-z0-9_-]+\.[a-z0-9_-]+)"; 
var optionalUrlPart:String = "(\.[a-z0-9_-]*)"; 
var urlPattern:RegExp = new RegExp(protocol + urlPart + optionalUrlPart, "ig"); 
var result:String = input.replace(urlPattern, "<a href='$1$2$3'><u>$1$2$3</u></a>");

De constructorfunctie RegExp() wordt gebruikt om een reguliere expressie (urlPattern) samen te stellen uit een aantal bestanddelen. Deze bestanddelen zijn elk een tekenreeks die een deel van het reguliere-expressiepatroon definiëren.

Het eerste deel van het reguliere-expressiepatroon, gedefinieerd door de tekenreeks protocol, definieert een URL- protocol: ofwel http:// ofwel ftp://. De ronde haakjes definiëren een niet vastgelegde groep, die wordt aangegeven door het symbool ?. Dit betekent dat de ronde haakjes eenvoudig worden gebruikt om een groep te definiëren voor het alternatievenpatroon |; de groep komt niet overeen met terugverwijzingscodes ($1, $2, $3) in de vervangende tekenreeks van de methode replace().

De andere bestanddelen van de reguliere expressie maken elk gebruik van vastgelegde groepen (in het patroon aangegeven door ronde haakjes), die worden gebruikt in de terugverwijzingscodes ($1, $2, $3) in de vervangende tekenreeks van de methode replace().

Het gedeelte van het patroon dat gedefinieerd is door de tekenreeks urlPart komt ten minste met een van de volgende tekens overeen: a-z, 0-9, _ of -. De kwantor + geeft aan dat ten minste één teken overeenkomt. De \. geeft een vereist punt-teken ( aan.) character. En de rest komt overeen met een andere tekenreeks van ten minste een van deze tekens: a-z, 0-9, _ of -.

Het gedeelte van het patroon dat gedefinieerd is door de tekenreeks optionalUrlPart komt nul keer of vaker met een van de volgende tekens overeen: een punt (.) gevolgd door een willekeurig aantal alfanumerieke tekens (waaronder _ en -). De kwantor * geeft aan dat nul of meer tekens overeenkomen.

De aanroep van de methode replace() maakt gebruik van de reguliere expressie en stelt de vervangende HTML-tekenreeks samen, waarbij gebruik wordt gemaakt van terugverwijzingen.

De methode urlToATag() roept vervolgens de methode emailToATag() aan, die vergelijkbare technieken gebruikt om e-mailpatronen te vervangen door HTML-tekenreeksen <a> voor hyperlinks. De reguliere expressies die in dit voorbeeldbestand worden gebruikt om overeen te komen met HTTP-, FTP- en e-mail-URL's, zijn in deze voorbeelden vrij eenvoudig; er zijn veel gecompliceerdere reguliere expressies die ervoor zorgen dat dergelijke URL's correct overeenkomen.

Dollar-tekenreeksen omzetten in euro-tekenreeksen

Wanneer de gebruiker in de testtoepassing op de knop Test klikt, nadat hij het selectievakje dollarToEuro heeft ingeschakeld, roept de toepassing de statische methode CurrencyConverter.usdToEuro() op om dollar-tekenreeksen (zoals "$9.95") als volgt om te zetten in euro-tekenreeksen (zoals "8.24 €"):

var usdPrice:RegExp = /\$([\d,]+.\d+)+/g; 
return input.replace(usdPrice, usdStrToEuroStr); 

De eerste regel definieert een eenvoudig patroon voor overeenkomende dollar-tekenreeksen. Hierin wordt het teken $ voorafgegaan door de backslash (\) als escape-teken.

De methode replace() gebruikt de reguliere expressie voor patroonovereenkomst, en roept de functie usdStrToEuroStr() aan om de vervangende tekenreeks (een waarde in euro) te bepalen.

Wanneer een functienaam gebruikt wordt als de tweede parameter van de methode replace(), worden de volgende delen als parameters doorgestuurd naar de aangeroepen functie:

  • Het overeenkomende gedeelte van de tekenreeks.

  • Elke willekeurige vastgelegde groep met ronde haakjes komt overeen. Het aantal op deze wijze doorgegeven argumenten hangt af van het aantal overeenkomsten van vastgelegde groepen tussen ronde haakjes. U kunt het aantal overeenkomsten van vastgelegde groepen tussen ronde haakjes vaststellen door arguments.length - 3 binnen de functiecode te controleren.

  • De indexpositie in de tekenreeks waar de overeenkomst begint.

  • De volledige tekenreeks.

De methode usdStrToEuroStr() zet tekenreekspatronen in Amerikaanse dollar als volgt om in euro-tekenreeksen:

private function usdToEuro(...args):String 
{ 
    var usd:String = args[1]; 
    usd = usd.replace(",", ""); 
    var exchangeRate:Number = 0.828017; 
    var euro:Number = Number(usd) * exchangeRate; 
    trace(usd, Number(usd), euro); 
    const euroSymbol:String = String.fromCharCode(8364); // € 
    return euro.toFixed(2) + " " + euroSymbol;  
}

De variabele args[1] vertegenwoordigt de vastgelegde groep tussen haakjes die overeenkomt met de reguliere expressie usdPrice. Dit is het numerieke gedeelte van de dollar-tekenreeks dat wil zeggen het dollarbedrag zonder het valutasymbool $. De methode past een wisselkoersconversie toe en retourneert de resulterende tekenreeks (met een navolgend €-symbool in plaats van een $-symbool ervóór).