JavaScript-merkkijonohaku


Sisällysluettelo

    Näytä sisällysluettelo

Merkkijonohakumenetelmät

  • String indexOf()
  • String lastIndexOf()
  • String search()
  • String match()
  • String matchAll()
  • String includes()
  • String startsWith()
  • String endsWith()

JavaScript-merkkijono indexOf()

Metodi indexOf() palauttaa indeksin (sijainti) merkkijonon ensimmäinen esiintyminen merkkijonossa:

Esimerkki

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

Kokeile itse →

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

Huomautus

JavaScript laskee paikat nollasta.

0 on ensimmäinen paikka a:ssa merkkijono, 1 on toinen, 2 on kolmas, ...


JavaScript-merkkijono lastIndexOf()

Metodi lastIndexOf() palauttaa viimeisen indeksin tietyn tekstin esiintyminen merkkijonossa:

Esimerkki

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

Kokeile itse →

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

Sekä indexOf() ja lastIndexOf() palauttavat -1 jos tekstiä ei löydy:

Esimerkki

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

Kokeile itse →

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

Molemmat menetelmät hyväksyvät toisen parametrin aloitusasemaksi Hae:

Esimerkki

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

Kokeile itse →

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

Menetelmät lastIndexOf() hakevat taaksepäin (lopusta alkuun), mikä tarkoittaa: jos toinen parametri on 15, haku alkaa sijainnista 15 ja etsii merkkijonon alkuun.

Esimerkki

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

Kokeile itse →

<!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-merkkijonohaku()

haku()-menetelmä etsii merkkijonosta merkkijonoa (tai säännöllistä lauseketta) ja palauttaa ottelun sijainnin:

Esimerkkejä

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

Kokeile itse →

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

Kokeile itse →

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


Huomasitko?

Kaksi menetelmää, indexOf() ja search(), ovat samanlaisia?

Ne hyväksyvät samat argumentit (parametrit) ja palauttavat saman arvon?

Nämä kaksi menetelmää EIVÄT ole samanarvoisia. Nämä ovat erot:

  • Metodi haku() ei voi ottaa toista aloituspaikan argumenttia.

  • Metodi indexOf() ei voi kestää tehokkaat hakuarvot (säännölliset lausekkeet).

Saat lisätietoja säännölliset lausekkeet myöhemmässä luvussa.



JavaScript-merkkijono match()

Metodi match() palauttaa taulukon, joka sisältää vastaavuuden tulokset merkkijono merkkijonoa vastaan (tai säännöllinen lauseke).

Esimerkkejä

Tee haku "ain":

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

Kokeile itse →

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

Tee haku "ain":

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

Kokeile itse →

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

Tee globaali haku "ain":

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

Kokeile itse →

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

Tee globaali, kirjainkoolla välitön haku "ain":

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

Kokeile itse →

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

Huomautus

Jos säännöllinen lauseke ei sisällä g-muuttajaa (yleinen haku), match() palauttaa vain ensimmäisen osuman merkkijonosta.

Lue lisää säännöllisistä lausekkeista luvussa JS RegExp.


JavaScript-merkkijono matchAll()

Metodi matchAll() palauttaa iteraattorin, joka sisältää täsmäämisen tulokset merkkijono merkkijonoa vastaan (tai säännöllinen lauseke).

Esimerkki

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

Kokeile itse →

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

Jos parametri on säännöllinen lauseke, globaali lippu (g) on asetettava muussa tapauksessa tulee TypeError.

Esimerkki

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

Kokeile itse →

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

Jos haluat tehdä haun kirjainkoon erottelematta, välitön lippu (i) on asetettava:

Esimerkki

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

Kokeile itse →

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

Huomautuksia

matchAll() on ES2020-ominaisuus.

matchAll() ei toimi Internet Explorerissa.


JavaScript-merkkijono sisältää()

Metodi includes() palauttaa tosi, jos merkkijono sisältää tietyn arvon.

Muussa tapauksessa se palauttaa false.

Esimerkkejä

Tarkista, sisältääkö merkkijono sanan "maailma":

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

Kokeile itse →

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

Tarkista, sisältääkö merkkijono sanan "maailma". Aloita paikasta 12:

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

Kokeile itse →

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

Huomautuksia

includes() on kirjainkoolla.

includes() on ES6-ominaisuus.

includes() ei tueta Internet Explorerissa.


JavaScript-merkkijono alkaa With()

Metodi startsWith() palauttaa true jos merkkijono alkaa tietyllä arvolla.

Muussa tapauksessa se palauttaa false:

Esimerkkejä

Palauttaa totuuden:

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

Kokeile itse →

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

Palauttaa false:

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

Kokeile itse →

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

Haun aloituspaikka voidaan määrittää:

Palauttaa false:

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

Kokeile itse →

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

Palauttaa totuuden:

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

Kokeile itse →

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

Huomautuksia

startsWith() on kirjainkoolla.

startsWith() on ES6-ominaisuus.

startsWith() ei tueta Internet Explorerissa.


JavaScript-merkkijono päättyy()

Metodi endsWith() palauttaa true jos merkkijono päättyy tiettyyn arvoon.

Muussa tapauksessa se palauttaa false:

Esimerkkejä

Tarkista, päättyykö merkkijono "Doe":

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

Kokeile itse →

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

Tarkista, päättyvätkö merkkijonon 11 ensimmäistä merkkiä "maailma":

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

Kokeile itse →

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

Huomautuksia

endsWith() on kirjainkoolla.

endsWith() on ES6-ominaisuus.

endsWith() ei ole tuettu Internet Explorerissa.


Täydellinen merkkijonoviittaus

Täydellisen merkkijonoviitteen saat osoitteesta:

Täydellinen JavaScript-merkkijono.

Viite sisältää kuvauksia ja esimerkkejä kaikista merkkijonon ominaisuuksista ja menetelmistä.