JAVASCRIPT String
String objektet
Är ett paket med metoder(funktioner) för att manipulera, testa textsträngar som ord, textstycken eller hela meningar
Vi skapar en textsträng på följande sätt
var text1="Hej svejs!";
vilket går bra fast det exakta sättet är följande
var text2=new String("Heeeeej sveeeeejs!");
Egenskaper och metoder
Egenskap
- length
- Returnerar antal tecken i textsträngen.
<form>
<button type="button" id="btn_jsstringex1">Visa</button>
</form>
<div id="jsstringex1div">
</div>
<script>
document.getElementById('btn_jsstringex1').addEventListener('click',jsstringex1);
function jsstringex1() {
var text1="Hej svejs!";
var text2=new String("Heeeeej sveeeeejs!");
var s=text1 + " antal tecken = " + text1.length + "<br />";
s += text2 + " antal tecken = " + text2.length;
document.getElementById("jsstringex1div").innerHTML = s;
}
</script>
Färdiga metoder (funktioner) att använda
Kursiv text, kan ses som överkurs
- toLowerCase()
- Gör om alla tecken till små bokstäver.
- toUpperCase()
- Gör om alla tecken till stora bokstäver.
- substr(x,z)
- Plockar ut en delsträng med start i en viss position x och sen ett visst antal tecken z.
- substring(x, y)
- Plockar ut en delsträng med start i position x och stopp i position y (om den saknas plockas resten av strängen till slutet).
- charAt(x)
- Returnerar tecknet i position x. Första teckent i en sträng har positionsvärdet 0 (noll).
- indexOf()
- Returnerar positionen av första träffen mellan en teststräng och samma sträng någonstans i den ordinarie strängen. Om ingen träff inträffar så returneras svaret -1.
- includes()
- Returnerar true om den specificerade strängen i parentesen finns annars false.
- slice()
- Plockar ut en del av en sträng och returnerar den nya strängen.
- split(separator)
- Delar upp en sträng i en array av delsträngar, delare är angiven separator-sträng(ofta ett tecken).
- concat()
- Slår ihop två eller flera strängar, returnerar den nya strängen.
- Hos w3schools kan du se exempel samt klicka på metoderna och testa själv.
Några exempel
Här visas egenskapen length, metoderna charAt(), substring() och toUpperCase().
<form>
<label>Skriv ditt namn</label>
<input id="namn" type="text"><br>
<button type="button" id="btn_jsstringex2">Testa!</button>
</form>
<div id="jsstringex2div">
</div>
<script>
document.getElementById('btn_jsstringex2').addEventListener('click',jsstringex2);
function jsstringex2() {
"use strict";
var strang = document.getElementById("namn").value;
var s="Ditt namn innehåller " + strang.length + " tecken.<br>Sista tecknet i namnet är ";
s += strang.charAt(strang.length - 1) + ".<br>";
//Gör sista bokstaven stor
var x=strang.length;
//Plocka ut alla tecken från 0 fram till (x-1), ej inklusive (x-1)
var y= strang.substring(0,x-1);
var z= strang.charAt(x-1).toUpperCase();
var nystrang= y + z;
s+= "<br>Nya namnet med stor sista bokstav: "+nystrang;
document.getElementById("jsstringex2div").innerHTML = s;
}
</script>
Här visas metoden charAt(), substr(), split() och toLowerCase().
<form>
<button type="button" id="btn_jsstringex3">Visa</button>
</form>
<div id="jsstringex3div">
</div>
<script>
document.getElementById('btn_jsstringex3').addEventListener('click',jsstringex3);
function jsstringex3() {
"use strict";
var agentnamn = "Bond James";
var s=agentnamn+"<br><br>";
s+="De tre första tecknen: ";
s+=agentnamn.substr(0, 3)+"<br><br>"; // Bon
s+="Andra bokstaven: ";
s+=agentnamn.charAt(1)+"<br><br>"; // o
s+="Dela upp strängen: ";
var parts = agentnamn.split(" "); // Bond och James
s+=parts[1] + " \"007\" " + parts[0] + "<br><br>";
s+="Bara små bokstäver: ";
s+=agentnamn.toLowerCase();
document.getElementById("jsstringex3div").innerHTML = s;
}
</script>
Här visas indexOf() och includes().
<form>
<button type="button" id="btn_jsstringex3b">Visa</button>
</form>
<div id="jsstringex3bdiv">
</div>
<script>
document.getElementById('btn_jsstringex3b').addEventListener('click',jsstringex3b);
function jsstringex3b() {
var text3b="Hej svejs i lingonskogen!";
var s=text3b+ "<br />";
s += " Textsträngen innehåller 'lingon' :" + text3b.includes("lingon")+"<br>";
s += " lingon finns(startar) på plats: " + text3b.indexOf("lingon");
document.getElementById("jsstringex3bdiv").innerHTML = s;
}
</script>
Här visas bland annat sträng-metoderna charAt(), toString() och metoden för att omvandla ett heltal ur en sträng.
<form id="formjsstringex4">
<label>Skriv in ett mobilnummer och testa grundregler</label><br />
<input type="text" size="20" id="telnr" value="">
<button type="button" id="btn_jsstringex4">Testa</button>
</form>
<div id="jsstringex4div" class="red">
</div>
<script>
document.getElementById('btn_jsstringex4').addEventListener('click',jsstringex4);
function jsstringex4() {
"use strict";
var tnr = document.getElementById("telnr");
var svar = document.getElementById("jsstringex4div");
if (tnr.value == "") {
tnr.focus();
svar.innerHTML="Du måste mata in ditt mobiltelefonnr!";
}
else if (parseInt(tnr.value).toString() == "NaN" || tnr.value.length!=10) {
/* om ett fel inträffar för ett objekt så skickas en beskrivning
av felet till metoden toString, i detta fall inträffar det om det inte
är ett tal, då returneras strängen "NaN" (Not a Number) till toString() */
tnr.focus();
svar.innerHTML="Du får bara mata in siffror och det ska vara 10 st!";
}
else if (tnr.value.charAt(0) != "0" || tnr.value.charAt(1) != "7") {
// eller if (c.substring(0,2)!= "07")
tnr.focus();
svar.innerHTML="Mobilnumret måste börja på 07!";
}
else
{
svar.innerHTML = "<span class='green'>Det var ett korrekt formaterat mobiltelefonnummer. \nNumret var: " + tnr.value+"</span>";
// Kan nu skicka innehållet i formuläret med
// document.getElementById('formjsstringex4').submit();
}
}
</script>
Källor
HTML5 & CSS3 FOR THE REAL WORLD, Goldstein, Lazaris, Weyl (Sitepoint 2011)