JavaScript-strängsökning

Innehållsförteckning

    Visa innehållsförteckning

Strängsökningsmetoder

    

  • String indexOf()
    • 

  • String lastIndexOf()
    • 

  • String search()
    • 

  • String match()
    • 

  • String matchAll()
    • 

  • String includes()
    • 

  • String startsWith()
    • 

  • String endsWith()
    •

JavaScript String indexOf()

Metoden indexOf() returnerar index (position) den första förekomsten av en sträng i en sträng:

Exempel

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

Prova själv →

<!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>

Notera

JavaScript räknar positioner från noll.

0 är den första positionen i a sträng, 1 är den andra, 2 är den tredje, ...

JavaScript-sträng lastIndexOf()

Metoden lastIndexOf() returnerar index för den senaste förekomst av en angiven text i en sträng:

Exempel

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

Prova själv →

<!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() och lastIndexOf() returnerar -1 om texten inte hittas:

Exempel

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

Prova själv →

<!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>

Båda metoderna accepterar en andra parameter som startposition för Sök:

Exempel

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

Prova själv →

<!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()-metoderna söker baklänges (från slutet till början), vilket betyder: om den andra parametern är 15, startar sökningen vid position 15 och söker till början av strängen.

Exempel

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

Prova själv →

<!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-strängsökning()

Metoden search() söker i en sträng efter en sträng (eller ett reguljärt uttryck) och returnerar matchens position:

Exempel

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

Prova själv →

<!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/);

Prova själv →

<!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>

Märkte du?

De två metoderna, indexOf() och search(), är lika?

De accepterar samma argument (parametrar) och returnerar samma värde?

De två metoderna är INTE lika. Det här är skillnaderna:

  • Metoden search() kan inte ta ett andra startpositionsargument.

  • Metoden indexOf() kan inte ta kraftfulla sökvärden (reguljära uttryck).

Du kommer att lära dig mer om reguljära uttryck i ett senare kapitel.

JavaScript String match()

Metoden match() returnerar en array som innehåller resultaten av matchning en sträng mot en sträng (eller ett reguljärt uttryck).

Exempel

Utför en sökning efter "ain":

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

Prova själv →

<!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>

Utför en sökning efter "ain":

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

Prova själv →

<!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>

Utför en global sökning efter "ain":

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

Prova själv →

<!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>

Utför en global, skiftlägesokänslig sökning efter "ain":

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

Prova själv →

<!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>

Notera

Om ett reguljärt uttryck inte innehåller g-modifieraren (global sökning), match() returnerar endast den första matchningen i strängen.

Läs mer om reguljära uttryck i kapitlet JS RegExp.

JavaScript String matchAll()

Metoden matchAll() returnerar en iterator som innehåller resultaten av matchning en sträng mot en sträng (eller ett reguljärt uttryck).

Exempel

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

Prova själv →

<!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>

Om parametern är ett reguljärt uttryck måste den globala flaggan (g) ställas in, annars ett TypeError visas.

Exempel

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

Prova själv →

<!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>

Om du vill söka skiftlägesokänslig måste den okänsliga flaggan (i) ställas in:

Exempel

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

Prova själv →

<!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>

Anteckningar

matchAll() är en ES2020-funktion.

matchAll() fungerar inte i Internet Explorer.

JavaScript-strängen inkluderar()

Metoden includes() returnerar true om en sträng innehåller ett specificerat värde.

Annars returnerar den false.

Exempel

Kontrollera om en sträng innehåller "värld":

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

Prova själv →

<!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>

Kontrollera om en sträng innehåller "värld". Börja vid position 12:

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

Prova själv →

<!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>

Anteckningar

includes() är skiftlägeskänslig.

includes() är en ES6-funktion.

includes() stöds inte i Internet Explorer.

JavaScript-sträng startsWith()

Metoden startsWith() returnerar true om en sträng börjar med ett angivet värde.

Annars returnerar den false:

Exempel

Returnerar sant:

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

Prova själv →

<!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>

Returnerar falskt:

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

Prova själv →

<!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 för sökningen kan anges:

Returnerar falskt:

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

Prova själv →

<!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>

Returnerar sant:

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

Prova själv →

<!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>

Anteckningar

startsWith() är skiftlägeskänslig.

startsWith() är en ES6-funktion.

startsWith() stöds inte i Internet Explorer.

JavaScript-sträng endsWith()

Metoden endsWith() returnerar true om en sträng slutar med ett angivet värde.

Annars returnerar den false:

Exempel

Kontrollera om en sträng slutar med "Doe":

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

Prova själv →

<!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>

Kontrollera om de 11 första tecknen i en sträng slutar med "värld":

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

Prova själv →

<!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>

Anteckningar

endsWith() är skiftlägeskänslig.

endsWith() är en ES6-funktion.

endsWith() stöds inte i Internet Explorer.

Komplett strängreferens

För en fullständig strängreferens, gå till vår:

Komplett JavaScript-strängreferens.

Referensen innehåller beskrivningar och exempel på alla strängegenskaper och metoder.