JavaScript-strengsøgning

Indholdsfortegnelse

    Vis indholdsfortegnelse

Strengsøgningsmetoder

    

  • String indexOf()
    • 

  • String lastIndexOf()
    • 

  • String search()
    • 

  • String match()
    • 

  • String matchAll()
    • 

  • String includes()
    • 

  • String startsWith()
    • 

  • String endsWith()
    •

JavaScript String indexOf()

Metoden indexOf() returnerer indekset (position) den første forekomst af en streng i en streng:

Eksempel

let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate");

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The indexOf() Method</h2>

<p>The indexOf() method returns the position of the first occurrence of a string in a string.</p>
<p>The position of the first occurrence of "locate" is:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate");
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>

Bemærk

JavaScript tæller positioner fra nul.

0 er den første position i a streng, 1 er den anden, 2 er den tredje, ...

JavaScript-streng lastIndexOf()

Metoden lastIndexOf() returnerer indekset for sidste forekomst af en specificeret tekst i en streng:

Eksempel

let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate");

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The lastIndexOf() Method</h2>

<p>The position of the last occurrence of "locate" is:</p>

<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate");
document.getElementById("demo").innerHTML = index;
</script>

</body>
</html>

Både indexOf() og lastIndexOf() returnerer -1 hvis teksten ikke findes:

Eksempel

let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("John");

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The indexOf() Method</h2>

<p>Both indexOf() and lastIndexOf() return -1 if the text is not found:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("John");
document.getElementById("demo").innerHTML = index;
</script>

</body>
</html>

Begge metoder accepterer en anden parameter som startposition for Søg:

Eksempel

let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate", 15);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The indexOf() Method</h2>

<p>The indexOf() method accepts a second parameter as the starting position for the search:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate",15);
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>

lastIndexOf() metoderne søger baglæns (fra slutningen til begyndelsen), hvilket betyder: hvis den anden parameter er 15, starter søgningen ved position 15, og søger til begyndelsen af strengen.

Eksempel

let text = "Please locate where 'locate' occurs!";
text.lastIndexOf("locate", 15);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The lastIndexOf() Method</h2>

<p>The lastIndexOf() method accepts a second parameter as the starting position for the search.</p>
<p>Remember that the lastIndexOf() method searches backwards, so position 15 means start the search at position 15, and search to the beginning.</p>

<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate", 15);
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>

JavaScript-strengsøgning()

Metoden search() søger i en streng efter en streng (eller et regulært udtryk) og returnerer kampens position:

Eksempler

let text = "Please locate where 'locate' occurs!";
text.search("locate");

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The search() Method</h2>

<p>The search() method returns the position of the first occurrence of a string in a string.</p>
<p>The position of the first occurrence of "locate" is:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.search("locate");
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>


let text = "Please locate where 'locate' occurs!";
text.search(/locate/);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The search() Method</h2>

<p>The search() method returns the position of the first occurrence of a string in a string.</p>
<p>Return the position of the first occurrence of a regular expression:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.search(/locate/);
document.getElementById("demo").innerHTML = index;
</script>

</body>
</html>

lagde du mærke til det?

De to metoder, indexOf() og search(), er lige?

De accepterer de samme argumenter (parametre) og returnerer den samme værdi?

De to metoder er IKKE ens. Disse er forskellene:

  • Metoden search() kan ikke tage et andet startpositionsargument.

  • Metoden indexOf() kan ikke tage kraftfulde søgeværdier (regulære udtryk).

Du vil lære mere om regulære udtryk i et senere kapitel.

JavaScript-strengmatch()

Metoden match() returnerer en matrix, der indeholder resultaterne af matchning en streng mod en streng (eller et regulært udtryk).

Eksempler

Udfør en søgning efter "ain":

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match("ain");

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain";
const myArr = text.match("ain");
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>

</body>
</html>

Udfør en søgning efter "ain":

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match(/ain/);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain"; 
const myArr = text.match(/ain/);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;

</script>

</body>
</html>

Udfør en global søgning efter "ain":

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match(/ain/g);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a global search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain"; 
const myArr = text.match(/ain/g);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>

</body>
</html>

Udfør en global, ufølsom søgning efter "ain":

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match(/ain/gi);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a global, case-insensitive search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain"; 
const myArr = text.match(/ain/gi);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>

</body>
</html>

Bemærk

Hvis et regulært udtryk ikke indeholder g-modifikatoren (global søgning), match() returnerer kun det første match i strengen.

Læs mere om regulære udtryk i kapitlet JS RegExp.

JavaScript-streng matchAll()

Metoden matchAll() returnerer en iterator, der indeholder resultaterne af matchning en streng mod en streng (eller et regulært udtryk).

Eksempel

const iterator = text.matchAll("Cats");

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll("Cats");

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Hvis parameteren er et regulært udtryk, skal det globale flag (g) ellers indstilles en TypeError vises.

Eksempel

const iterator = text.matchAll(/Cats/g);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/g);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Hvis du vil søge ufølsomt mellem store og små bogstaver, skal det ufølsomme flag (i) indstilles:

Eksempel

const iterator = text.matchAll(/Cats/gi);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/gi);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Noter

matchAll() er en ES2020-funktion.

matchAll() virker ikke i Internet Explorer.

JavaScript-strengen inkluderer()

Metoden includes() returnerer sand, hvis en streng indeholder en specificeret værdi.

Ellers returnerer den false.

Eksempler

Tjek, om en streng indeholder "verden":

let text = "Hello world, welcome to the universe.";
text.includes("world");

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The includes() Method</h2>

<p>Check if a string includes "world":</p>
<p id="demo"></p>

<p>The includes() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world");
</script>

</body>
</html>

Tjek, om en streng indeholder "verden". Start ved position 12:

let text = "Hello world, welcome to the universe.";
text.includes("world", 12);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The includes() Method</h2>

<p>Check if a string includes "world" starting from position 12:</p>
<p id="demo"></p>

<p>The includes() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world", 12);
</script>

</body>
</html>

Noter

includes() skelner mellem store og små bogstaver.

includes() er en ES6-funktion.

includes() understøttes ikke i Internet Explorer.

JavaScript-streng starterMed()

Metoden startsWith() returnerer true hvis en streng begynder med en specificeret værdi.

Ellers returnerer den false:

Eksempler

Returnerer sandt:

let text = "Hello world, welcome to the universe.";
text.startsWith("Hello");

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>
<p>Check if a string starts with "Hello":</p>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("Hello");
</script>

</body>
</html>

Returnerer falsk:

let text = "Hello world, welcome to the universe.";
text.startsWith("world")

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world");
</script>

</body>
</html>

En startposition for søgningen kan angives:

Returnerer falsk:

let text = "Hello world, welcome to the universe.";
text.startsWith("world", 5)

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world", 5);
</script>

</body>
</html>

Returnerer sandt:

let text = "Hello world, welcome to the universe.";
text.startsWith("world", 6)

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world", 6);
</script>

</body>
</html>

Noter

startsWith() skelner mellem store og små bogstaver.

startsWith() er en ES6-funktion.

startsWith() understøttes ikke i Internet Explorer.

JavaScript-streng slutterWith()

Metoden endsWith() returnerer true hvis en streng slutter med en specificeret værdi.

Ellers returnerer den false:

Eksempler

Tjek om en streng slutter med "Doe":

let text = "John Doe";
text.endsWith("Doe");

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Check if a string ends with "Doe":</p>

<p id="demo"></p>

<p>The endsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "John Doe";
document.getElementById("demo").innerHTML = text.endsWith("Doe");
</script>

</body>
</html>

Tjek, om de 11 første tegn i en streng slutter med "verden":

let text = "Hello world, welcome to the universe.";
text.endsWith("world", 11);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Check in the 11 first characters of a string ends with "world":</p>

<p id="demo"></p>

<p>The endsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.endsWith("world", 11);
</script>

</body>
</html>

Noter

endsWith() skelner mellem store og små bogstaver.

endsWith() er en ES6-funktion.

endsWith() understøttes ikke i Internet Explorer.

Komplet strengreference

For en komplet strengreference, gå til vores:

Komplet JavaScript-strengreference.

Referencen indeholder beskrivelser og eksempler på alle strengegenskaber og metoder.