JavaScript replace() meetod: täielik juhend algajatele ja edasijõudnutele

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Sissejuhatus

2. replace() meetodi põhialused

Mis on replace() meetod?

Süntaks

string.replace(pattern, replacement)

• pattern: otsitav string või regulaaravaldis.
• replacement: asendav string või tagasikutsefunktsioon (callback).

Põhikasutus

let text = "Hello, world!";
let result = text.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

Tähelepanekud

1. replace() asendab ainult esimese leitud vaste.
2. Kõigi vastete asendamiseks tuleb kasutada regulaaravaldisi koos g lipuga.

3. Täiustatud asendused regulaaravaldisega

Mis on regulaaravaldis?

Asendus regulaaravaldiste abil

let text = "apple, banana, apple";
let result = text.replace(/apple/g, "orange");
console.log(result); // "orange, banana, orange"

Liputüübid

• g: globaalne asendus (asendab kõik vasted)
• i: tõstutundetu asendus (ei erista suuri ja väikseid tähti)
• m: mitmerealine režiim

Näide: tõstutundetu asendus

let text = "Hello, hello, HELLO";
let result = text.replace(/hello/gi, "hi");
console.log(result); // "hi, hi, hi"

4. Mitu asendust korraga

Kõigi vastete asendamine

let text = "cat dog cat bird";
let result = text.replace(/cat/g, "fish");
console.log(result); // "fish dog fish bird"

Mitme erineva stringi korraga asendamine

let text = "red blue green";
let replacements = {red: "pink", blue: "cyan", green: "lime"};

Object.keys(replacements).forEach(key => {
  let regex = new RegExp(key, "g");
  text = text.replace(regex, replacements[key]);
});

console.log(text); // "pink cyan lime"

5. Dünaamilised asendused tagasikutsefunktsiooni abil

Mis on tagasikutsefunktsioon?

Dünaamilise asenduse näited

1. Stringi järjekorra ümberpööramine

let text = "Tanaka, Taro";
let result = text.replace(/(w+), (w+)/, (match, p1, p2) => {
  return `${p2} ${p1}`;
});
console.log(result); // "Taro Tanaka"

2. Kuupäevaformaadi teisendamine

let date = "2024-12-25";
let formattedDate = date.replace(/(d{4})-(d{2})-(d{2})/, (match, year, month, day) => {
  return `${month}/${day}/${year}`;
});
console.log(formattedDate); // "12/25/2024"

6. Erimärkide ja põgenemissequentide käsitlemine

Mis on erimärgid?

Erimärke sisaldava stringi asendamine

Näide 1: punktimärgi asendamine

let text = "www.example.com";
let result = text.replace(/./g, "-");
console.log(result); // "www-example-com"

Näide 2: dollarimärgi eemaldamine

let price = "$1,000";
let result = price.replace(/$/g, "");
console.log(result); // "1,000"

HTML-entsüütide asendamine

Näide: HTML-tähemärkide põgenemine

let html = "<div>Hello!</div>";
let result = html.replace(/</g, "&lt;").replace(/>/g, "&gt;");
console.log(result);
// "&lt;div&gt;Hello!&lt;/div&gt;"

7. Praktilised näited ja tehnikad

Reavahetuste teisendamine <br> tagiks

let text = "HellonWorldnJavaScript";
let result = text.replace(/n/g, "<br>");
console.log(result);
// "Hello<br>World<br>JavaScript"

URL-i parameetrite muutmine

let url = "https://example.com/?id=123&lang=en";
let result = url.replace(/lang=en/, "lang=ja");
console.log(result);
// "https://example.com/?id=123&lang=ja"

Kasutajasisendi puhastamine (sanitization)

function sanitizeInput(input) {
  return input.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

let userInput = "<script>alert('XSS');</script>";
let safeInput = sanitizeInput(userInput);
console.log(safeInput);
// "&lt;script&gt;alert('XSS');&lt;/script&gt;"

8. Tähelepanekud ja parimad praktikad

Asendatakse ainult esimene vaste

let text = "apple apple orange";
let result = text.replace("apple", "banana");
console.log(result); // "banana apple orange"

Tähekuju eristamine

let text = "JavaScript is powerful. javascript is versatile.";
let result = text.replace(/javascript/gi, "JS");
console.log(result);
// "JS is powerful. JS is versatile."

Erimärkide õige põgenemine

function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[]\]/g, "\$&");
}

let text = "Price: $100";
let result = text.replace(new RegExp(escapeRegExp("$"), "g"), "USD ");
console.log(result);
// "Price: USD 100"

9. Kokkuvõte

Artikli kokkuvõte

• Põhikasutus: selgitasime replace() meetodi süntaksit ja lihtsat asendust.
• Regulaaravaldised: õppisime keerukamate asenduste ja lippude kasutamist.
• Tagasikutsefunktsioonid: nägime dünaamilisi asendusi ja praktilisi näiteid.
• Praktilised näited: URL-i muutmine ja sisendi puhastamine.
• Parimad praktikad: pöörasime tähelepanu täpsele asendusele ja jõudlusele.

Lõppsõna