JavaScript RegExp-objekt


Innehållsförteckning

    Visa innehållsförteckning


Ett reguljärt uttryck är en sekvens av tecken som bildar en sökmönster.

Sökmönstret kan användas för textsökning och textersättning operationer.


Vad är ett reguljärt uttryck?

Ett reguljärt uttryck är en sekvens av tecken som bildar en sökning mönster.

När du söker efter data i en text kan du använda detta sökmönster för att beskriva vad du söker efter.

Ett reguljärt uttryck kan vara ett enda tecken eller ett mer komplicerat mönster.

Reguljära uttryck kan användas för att utföra alla typer av textsökning och textersättning.

Syntax

/pattern/modifiers;

Exempel

/w3schools/i;

Exempel förklarat:

/w3schools/i är ett reguljärt uttryck.

w3schools är ett mönster (som ska användas i en sökning).

i är en modifierare (ändrar sökningen så att den inte är skiftlägeskänslig).


Använda strängmetoder

I JavaScript används ofta reguljära uttryck med de två strängarna metoder: search() och replace().

Metoden search() använder ett uttryck för att söka efter en match och returnerar matchens position.

Metoden replace() returnerar en modifierad sträng där mönstret byts ut.


Använda sträng search() med en sträng

Metoden search() söker i en sträng efter ett angivet värde och returnerar matchningens position:

Exempel

Använd en sträng för att göra en sökning efter "W3schools" i en sträng:

let text = "Visit W3Schools!";
let n = text.search("W3Schools");

Resultatet i n blir:

6

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Search a string for &quot;W3Schools&quot;, and display the position of the match:</p>

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

<script>
let text = "Visit W3Schools!"; 
let n = text.search("W3Schools");
document.getElementById("demo").innerHTML = n;
</script>

</body>
</html>


Använda String search() med ett reguljärt uttryck

Exempel

Använd ett reguljärt uttryck för att göra en skiftlägesokänslig sökning efter "w3schools" i en sträng:

let text = "Visit W3Schools";
let n = text.search(/w3schools/i);

Resultatet i n blir:

6

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Search a string for "w3Schools", and display the position of the match:</p>

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

<script>
let text = "Visit W3Schools!"; 
let n = text.search(/w3Schools/i);
document.getElementById("demo").innerHTML = n;
</script>

</body>
</html>



Använda String replace() med en String

Metoden replace() ersätter ett angivet värde med ett annat värde i en sträng:

let text = "Visit Microsoft!";
let result = text.replace("Microsoft", "W3Schools");

Prova själv →

<!DOCTYPE html>
<html>

<body>

<h1>JavaScript String Methods</h1>
<p>Replace &quot;Microsoft&quot; with &quot;W3Schools&quot; in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.replace("Microsoft","W3Schools");
}
</script>

</body>
</html>



Använd String replace() med ett reguljärt uttryck

Exempel

Använd ett skiftlägesokänsligt reguljärt uttryck för att ersätta Microsoft med W3Schools i en sträng:

let text = "Visit Microsoft!";
let result = text.replace(/microsoft/i, "W3Schools");

Resultatet i res blir:

Visit W3Schools!

Prova själv →

<!DOCTYPE html>
<html>

<body>

<h2>JavaScript String Methods</h2>

<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.replace(/microsoft/i, "W3Schools");
}
</script>

</body>
</html>

Märkte du?

Argument för reguljära uttryck (istället för strängargument) kan användas i metoderna ovan.
Reguljära uttryck kan göra din sökning mycket mer kraftfull (okänslig för skiftlägen till exempel).


Reguljära uttrycksmodifierare

Modifierare kan användas för att utföra skiftlägesokänsliga mer globala sökningar:

Modifierare:

i

Beskrivning: Utför skiftlägesokänslig matchning

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a case-insensitive search for "w3schools" in a string:</p>

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

<script>
let text = "Visit W3Schools";
let result = text.match(/w3schools/i);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modifierare:

g

Beskrivning: Gör en global matchning (hitta alla matcher istället för att sluta efter den första matchen)

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for "is" in a string:</p>

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

<script>
let text = "Is this all there is?";
let result = text.match(/is/g);
document.getElementById("demo").innerHTML = result; 
</script>

</body>
</html>

Modifierare:

m

Beskrivning: Utför flerradsmatchning

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a multiline search for "is" at the beginning of each line in a string:</p>

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

<script>
let text = "\nIs th\nis it?";
let result = text.match(/^is/m);
document.getElementById("demo").innerHTML = "Result is: " + result;
</script>

</body>
</html>

Reguljära uttrycksmönster

parenteser används för att hitta ett antal tecken:

Modifierare:

[abc]

Beskrivning: Hitta något av tecknen mellan hakparenteserna

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for the character "h" in a string:</p>

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

<script>
let text = "Is this all there is?";
let result = text.match(/[h]/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modifierare:

[0-9]

Beskrivning: Hitta någon av siffrorna mellan parenteserna

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for the numbers 1 to 4 in a string:</p>

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

<script>
let text = "123456789";
let result = text.match(/[1-4]/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modifierare:

(x|y)

Beskrivning: Hitta något av alternativen separerade med |

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for any of the specified alternatives (red|green):</p>

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

<script>
let text = "re, green, red, green, gren, gr, blue, yellow";
let result = text.match(/(red|green)/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Metatecken är tecken med en speciell betydelse:

Modifierare:

\d

Beskrivning: Hitta en siffra

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for digits in a string:</p>

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

<script>
let text = "Give 100%!"; 
let result = text.match(/\d/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modifierare:

\s

Beskrivning: Hitta ett blanksteg

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for whitespace characters in a string:</p>

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

<script>
let text = "Is this all there is?";
let result = text.match(/\s/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modifierare:

\b

Beskrivning: Hitta en matchning i början av ett ord så här: \bWORD eller i slutet av ett ord så här: WORD\b

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Search for the characters "LO" in the <b>beginning</b> of a word in the phrase:</p>
<p>"HELLO, LOOK AT YOU!"</p>

<p>Found in position: <span id="demo"></span></p>

<script>
let text = "HELLO, LOOK AT YOU!"; 
let result = text.search(/\bLO/);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Search for the characters "LO" in the <b>end</b> of a word in the phrase:</p>
<p>"HELLO, LOOK AT YOU!"</p>

<p>Found in position: <span id="demo"></span></p>

<script>
let text = "HELLO, LOOK AT YOU!"; 
let result = text.search(/LO\b/);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modifierare:

\uxxxx

Beskrivning: Hitta Unicode-tecknet som anges av det hexadecimala talet xxxx

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for the hexadecimal number 0057 (W) in a string:</p>

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

<script>
let text = "Visit W3Schools. Hello World!"; 
let result = text.match(/\u0057/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Kvantifierare definierar kvantiteter:

Modifierare:

n+

Beskrivning: Matchar alla strängar som innehåller minst ett n

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for at least one "o" in a string:</p>

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

<script>
let text = "Hellooo World! Hello W3Schools!"; 
let result = text.match(/o+/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modifierare:

n*

Beskrivning: Matchar alla strängar som innehåller noll eller fler förekomster av n

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for an "l", followed by zero or more "o" characters:</p>

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

<script>
let text = "Hellooo World! Hello W3Schools!"; 
let result = text.match(/lo*/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modifierare:

n?

Beskrivning: Matchar alla strängar som innehåller noll eller en förekomst av n

Prova →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for a "1", followed by zero or one "0" characters:</p>

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

<script>
let text = "1, 100 or 1000?";
let result = text.match(/10?/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Använda RegExp-objektet

I JavaScript är RegExp-objektet ett reguljärt uttrycksobjekt med fördefinierade egenskaper och metoder.


Använder test()

Metoden test() är en RegExp-uttrycksmetod.

Den söker efter ett mönster i en sträng och returnerar sant eller falskt, beroende på resultatet.

Följande exempel söker efter tecknet "e" i en sträng:

Exempel

const pattern = /e/;
pattern.test("The best things in life are free!");

Eftersom det finns ett "e" i strängen blir utdata från koden ovan:

true

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Search for an "e" in the next paragraph:</p>

<p id="p01">The best things in life are free!</p>

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

<script>
let text = document.getElementById("p01").innerHTML;
const pattern = /e/;
document.getElementById("demo").innerHTML = pattern.test(text);
</script>

</body>
</html>

Du behöver inte sätta det reguljära uttrycket i en variabel först. De två raderna ovan kan förkortas till en:

/e/.test("The best things in life are free!");

Använder exec()

Metoden exec() är en RegExp-uttrycksmetod.

Den söker i en sträng efter ett specificerat mönster och returnerar den hittade texten som ett objekt.

Om ingen matchning hittas returnerar den ett tomt (null)-objekt.

Följande exempel söker efter tecknet "e" i en sträng:

Exempel

/e/.exec("The best things in life are free!");

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

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

<script>
const obj = /e/.exec("The best things in life are free!");
document.getElementById("demo").innerHTML =
"Found " + obj[0] + " in position " + obj.index + " in the text: " + obj.input;
</script>

</body>
</html>

Fyll i RegExp-referens

För en fullständig referens, gå till vår Komplett JavaScript RegExp-referens.

Referensen innehåller beskrivningar och exempel på alla RegExp egenskaper och metoder.