Cursus Javascript

Beginner

Gevorderde

Appendix

Informatie

Referenties

Links

2 Variabelen

2.2 Strings

» Inhoudstafel
2.2.1 Inleiding
2.2.2 Strings
2.2.3 Reguliere expressies
2.2.4 Slot

 Test je kennis!

2.2.1 Inleiding

Een string is te vertalen als een teken of een reeks tekens. In javascript worden strings gedefineerd met een quote aan elke kant van je reeks tekens. Een voorbeeld:

"Dit is een string !"

2.2.2 Strings

Een string sla je meestal op in een variabele. Een variabele is een nicknaam om een waarde mee te associëren. Nadat je een waarde aan een variabele hebt toegevoegd kun je die aanroepen met de naam van de variabele. De syntax voor het aanmaken is als volgt: var <variabeleNaam> = <waarde>;

var mijnString = "Dit is een string !"
alert( mijnString );

Nu moet een alert box komen waarin we de inhoud van onze string kunnen bekijken. Een string alleen bekijken is meestal niet genoeg. Daarom kun je een string ook manipuleren, bewerken en vastplakken aan een andere variabele.

Nu moet je nog eens kijken naar de code fragment hierboven. Hier zie je dat ik in de eerste regel geen punt-komma gebruik, terwijl ik dat wel doe in de volgende regel. Dit heb ik expres gedaan om je te laten zien dat het niet hoeft. JavaScript kan het namelijk niet schelen of je een punt-komma gebruikt of niet, als alle code regels op hun eigen regel worden geschreven. Ik raad je echter wel aan om punt-komma's achter je code regels te plaatsen. Dit is om fouten te voorkomen, en hoef je je oude gewoontes van eerdere programmeertalen niet af te leren.

"Een string is een stuk tekst". Dat heb ik eerder gezegd, maar in JavaScript is het ook tegelijkertijd een object. Zo een beetje alles in JavaScript is een object. Dit betekent dat je gewoon achter een stukje tekst gewoon een attribuut van de tekst kunt opvragen. Je kunt bijvoorbeeld de attribuut lengte opvragen door length achter de string te plakken.

alert("Dit is een string".length);

Wat wij gaan doen is, een string aanmaken die mij kan vertellen hoe ik heet en hoe oud ik ben. Hiervoor moet er dus van twee variabelen informatie komen, en we moeten de mogelijkheid hebben om die in onze string te voegen:

var naam = "Psycho";
var age = 17;
 
alert( naam + " is " + age + " jaar oud" );
 

In dit blokje code hebben we twee variabelen aangemaakt en die in onze string herbruikt. Dit heet Contatenatie met een moeilijk woord.

Ik heb nu een hele lange zin, maar ik wil graag de eerste 50 tekens eruit vissen, drie puntjes op het einde hebben en een lees verder tekstje hebben.

var langeString = "Welkom op de webcursus javascript voor beginners.
Na het doorlopen van deze sectie zul je de basis ruim voldoende beheersen. 
Maar je moet wel moeite doen om alles doorheen te lopen.";
 
alert( langeString.substring( 0, 49 ) + "... lees verder");

Je ziet hierboven dat we in de eerste parameter een 0 hebben staan. In JavaScript begint alles te tellen vanaf 0, behalve bij het tellen van de elementen in een Array.

Nu hebben we een probleem. Bij de vorige code fragment heeft de gebruiker zijn naam NiEt nOrmaAl ingetikt. Wij gaan nu dus die script veranderen zodat het niet uitmaakt hoe de naam geschreven wordt. We gaan hem downcasen en de eerste letter een hoofdletter van maken.

var naam = "pSyChO";
var age = 17;
 
alert( naam[0].toUpperCase( ) + naam.substring( 1 ).toLowerCase() + " is " + 
age + " jaar oud" );

Een string wordt in JavaScript ook wel gezien als een array (meer hierover in het volgende subhoofdstuk). De index begint bij 0 en eindigt op de lengte van de string - 1.

Deze script werkt niet in IE. Dit komt omdat Internet Explorer de string niet ziet als een Array. Daarom kun je het beste gebruik maken van charAt( integer Index ) voor cross-browser compatibiliteit. Als je bovenstaande script uitvoert, zul je dus een undefined geoutput krijgen. De volgende code zal nu dus wel de juiste informatie weergeven.

var naam = "pSyChO";
var age = 17;
 
alert( naam.charAt( 0 ).toUpperCase( ) + naam.substring( 1 ).toLowerCase( ) + " is " +
age + " jaar oud");

Zoals je kunt zien, kun je meerdere methoden aan elkaar vastplakken. Dit komt omdat de String object-methoden meestal het object zelf returnen waardoor een andere functie meteen gebruik van kan maken.

» Voorbeelden:

2.2.3 Reguliere expressies

We zijn aangekomen bij reguliere expressies. Een reguliere expressie is te beschrijven als een zoekopdracht om door een tekst te zoeken zonder een specifiek woord te definiëren. Met behulp van tekens kun je dan een reguliere expressie maken en proberen die te laten matchen met je string. In deze paragraaf gaan we niet diep in de reguliere expressies. Ik zal meer vertellen op welke manieren je in JavaScript reguliere expressies kunt toepassen.

Een reguliere expressie definiëren kan op twee manieren:

var myExpr = /mijnexpressie/;
var myExpr = new RegExp('mijnexpressie');

Met een van deze twee manieren krijg je toegang tot het Reguliere Expressie Object. Wij gaan nu een aantal van die krachtige methods bekijken.

Een krachtige method die je tot je beschikking krijgt is de test functie. Hiermee kun je je reguliere expressie testen op een string om te kijken of de zoekopdracht is voltooid. Bij succes retourneert hij true. Bij geen match zal er false retourneert worden. Laten we een voorbeeld bekijken:

var myExpr = /Psycho/;
alert(myExpr.test('De auteur van dze cursus is Psycho')); // # => true

Voor degene die al een beetje aan het spelen zijn met reguliere expressies, zijn er vast al achter gekomen dat de zoekopdrachten case-sensitive zijn. Er is een mogelijkheid om dit uit te schakelen. Hiervoor moet je Modifiers aan de expressie toevoegen.

De volgende modifiers zijn de belangrijkste flags ondersteunt door JavaScript:

Het gebruik van zo'n modifier is erg simpel. Hier moet je wel opletten dat het gebruiken van een modifier met de "new RegExp" notatie anders is dan de "/regex/" notatie:

myRegExp = new RegExp(<regular_expression>, <modifiers>);
myRegExp = /<regular_expression>/<modifiers>

Je kunt meerdere modifiers tegelijkertijd gebruiken door ze gewoon naast elkaar te zetten op de plek waar ze horen.

Een andere functie dat ik graag wil bespreken is search. Search is een functie die je kunt gebruiken om door een tekst heen te zoeken en de positie van de gematchde string terug te krijgen. Bijvoorbeeld, jij wil weten waar de postcode begint in een string waar een volledige adres is opgeslagen:

var myPostCodeRegExp = /[0-9]{4}[a-zA-Z]{2}/;
 
alert("Prof. Cobbenhagenlaan 45 5034GG Eindhoven Nederland".search(myPostCodeRegExp));

Zoals je ziet bevind de search functie niet in de RegExp object, maar de String object. Zo kan ik dus achter elke string en achter elke functie dat een String object returned deze functie gebruiken.

Wellicht wil je je zoekresultaat in een string opslaan. Dit kan met drie functies. De eerste functie die ik ga bespreken is exec.

Exec zorgt ervoor dat je reguliere expressie wordt uitgevoerd op de string van keuze en hij geeft het resultaat terug zodat jij het kan opslaan in een String object. Een klein voorbeeld van wat de exec functie voor je kan doen is misschien wel nodig. Laten we de postcode van hierboven weergeven in een alert boxje:

var myPostCodeRegExp = /[0-9]{4}[a-zA-Z]{2}/;
var stringObject = "Prof. Cobbenhagenlaan 45 5034GG Eindhoven Nederland";
var myResult = myPostCodeRegExp.exec(stringObject);
 
alert(myResult);

Als het goed is, zul je nu 5034GG in je alert box moeten vinden.

De andere functie vind ik persoonlijk veel beter. Meestal werk je met reguliere expressies omdat je gedeeltes van een string wil matchen en returned hebben. Maar met de exec functie krijg je alleen maar 1 resultaat. Ik wil graag het adres en de postcode én de stadsnaam en land uit deze string hebben en deze twee gedeeltes in een eigen array element. Nu is er een string methode die onze string kan splitten op een reguliere expressie.

var myPostCodeRegExp = /[0-9]{4}[a-zA-Z]{2}/;
var stringObject = "Prof. Cobbenhagenlaan 45 5034GG Eindhoven Nederland";
var myResults   = stringObject.split(myPostCodeRegExp);
 
alert(myResults);

Met parentheses, ( en ), kun je verschillende gedeeltes van de string matchen en ze afzonderlijk behandelen. Iedereen kent wel de alombekende UBB tags. Wij gaan ook zo'n ubb tag match reguliere expressie maken. Wij willen wel graag dat de gematchede gedeelte in een array komt te staan. Split kan ons hier niet bij helpen, omdat split het gedeelte dat de reguliere epxressie matched weggooit. Er is een andere functie voor zulke taken en dat is match. Deze functie returned een array, waarvan elk element een parenthese sectie is. De eerste element is de gematchede gedeelte van de string.

var myUBBRegExp = /\[(.*?)\](.*?)\[\/(.*?)\]/;
var myString = "[b]Dit word bold[/b]";
 
alert(myString.match(myUBBRegExp));

Nu wil ik graag de UBB tags vervangen met HTML. Dit kan met een speciale functie: replace. Hij accepteert een reguliere expressie als eerste parameter. De tweede parameter is de string waarmee hij vervangen moet worden. In de tweede parameter mag je gebruik maken van backreferences. Dat zijn variabelen die verwijzen naar de parentheses in je reguliere epxressie. De backreference gaat van $1 naar $9, waar $1 naar de eerste parenthese verwijst:

var myUBBRegExp = /\[(.*?)\](.*?)\[\/(.*?)\]/;
var myString = "[b]Dit word bold[/b]";
 
alert(myString.replace(myUBBRegExp, "<$1>$2</$3>));

In de alert box zou je nu de HTML code moeten zien.

Dit was een korte introductie in reguliere epxressies. Voor meer informatie naar reguliere epxressies, zie linkerkolom onder de referenties.

2.2.4 Slot

Ik heb in dit hoofdstuk wat aspecten van de String object in JavaScript uitgelegd. We hebben een string aangemaakt, gewijzigd, en beïnvloed. Nog heel kort een lijstje met de zaken die we hebben gedaan in dit hoofdstuk:

Copyright © www.cursusjavascript.be 2007 - 2012
www.cursusjavascript.be werkt samen met Sitemasters.be
en is onderdeel van Webcursussen.be