วัตถุ JavaScript RegExp

สารบัญ

แสดงสารบัญ

นิพจน์ทั่วไปคือลำดับของอักขระที่ก่อตัวเป็น รูปแบบการค้นหา

รูปแบบการค้นหาสามารถใช้สำหรับการค้นหาข้อความและการแทนที่ข้อความ การดำเนินงาน

นิพจน์ทั่วไปคืออะไร?

นิพจน์ทั่วไปคือลำดับของอักขระที่สร้างการค้นหา รูปแบบ.

เมื่อคุณค้นหาข้อมูลในข้อความ คุณสามารถใช้รูปแบบการค้นหานี้เพื่ออธิบายสิ่งที่คุณกำลังค้นหา

นิพจน์ทั่วไปอาจเป็นอักขระตัวเดียวหรือรูปแบบที่ซับซ้อนกว่าก็ได้

สามารถใช้นิพจน์ทั่วไปเพื่อดำเนินการ ค้นหาข้อความ ได้ทุกประเภท และการดำเนินการแทนที่ข้อความ

ไวยากรณ์

/pattern/modifiers;

ตัวอย่าง

/w3schools/i;

ตัวอย่างอธิบาย:

/w3schools/i เป็นนิพจน์ทั่วไป

w3schools เป็นรูปแบบ (ใช้ในการค้นหา)

i เป็นตัวแก้ไข (แก้ไขการค้นหาให้คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่)

การใช้วิธีสตริง

ใน JavaScript นิพจน์ทั่วไปมักจะใช้กับสตริง สองตัว วิธีการ: search() และ replace()

search() วิธีการใช้นิพจน์เพื่อค้นหา ตรงกัน และส่งคืนตำแหน่งของการแข่งขัน

replace() วิธีการส่งกลับสตริงที่แก้ไขโดยที่ รูปแบบจะถูกแทนที่

การใช้สตริง `search()` ด้วยสตริง

search() วิธีการค้นหาสตริงสำหรับค่าที่ระบุและส่งกลับตำแหน่งของการจับคู่:

ตัวอย่าง

ใช้สตริงเพื่อค้นหา "W3schools" ในสตริง:

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

ผลลัพธ์ใน n จะเป็น:

6

ลองด้วยตัวคุณเอง →

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

การใช้สตริง `search()` ด้วยนิพจน์ทั่วไป

ตัวอย่าง

ใช้นิพจน์ทั่วไปเพื่อค้นหา "w3schools" ในสตริงโดยคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่:

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

ผลลัพธ์ใน n จะเป็น:

6

ลองด้วยตัวคุณเอง →

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

การใช้สตริง `replace()` ด้วยสตริง

replace() วิธีการแทนที่ค่าที่ระบุด้วยค่าอื่นในสตริง:

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

ลองด้วยตัวคุณเอง →

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

ใช้สตริง `replace()` ด้วยนิพจน์ทั่วไป

ตัวอย่าง

ใช้นิพจน์ทั่วไปที่ไม่คำนึงถึงขนาดตัวพิมพ์เพื่อแทนที่ Microsoft ด้วย W3Schools ในสตริง:

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

ผลลัพธ์ใน res จะเป็น:

Visit W3Schools!

ลองด้วยตัวคุณเอง →

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

คุณสังเกตเห็นไหม?

อาร์กิวเมนต์นิพจน์ทั่วไป (แทนอาร์กิวเมนต์สตริง) สามารถใช้ในวิธีการข้างต้นได้
นิพจน์ทั่วไปสามารถทำให้การค้นหาของคุณมีประสิทธิภาพมากขึ้น (เช่น ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่)

ตัวแก้ไขนิพจน์ปกติ

ตัวแก้ไข สามารถใช้เพื่อทำการค้นหาทั่วโลกโดยไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่:

ตัวแก้ไข:

คำอธิบาย: ทำการจับคู่โดยคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่

ลองเลย →

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

ตัวแก้ไข:

คำอธิบาย: ทำการแข่งขันระดับโลก (ค้นหาการแข่งขันทั้งหมดแทนที่จะหยุดหลังจากนัดแรก)

ลองเลย →

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

ตัวแก้ไข:

คำอธิบาย: ทำการจับคู่หลายบรรทัด

ลองเลย →

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

รูปแบบการแสดงออกปกติ

วงเล็บ ใช้เพื่อค้นหาช่วงของอักขระ:

ตัวแก้ไข:

[abc]

คำอธิบาย: ค้นหาอักขระใดๆ ที่อยู่ระหว่างวงเล็บเหลี่ยม

ลองเลย →

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

ตัวแก้ไข:

[0-9]

คำอธิบาย: ค้นหาตัวเลขใดๆ ที่อยู่ระหว่างวงเล็บ

ลองเลย →

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

ตัวแก้ไข:

(x|y)

คำอธิบาย: ค้นหาทางเลือกใดๆ ที่คั่นด้วย |

ลองเลย →

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

MetaCharacters คืออักขระที่มีความหมายพิเศษ:

ตัวแก้ไข:

\d

คำอธิบาย: ค้นหาตัวเลข

ลองเลย →

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

ตัวแก้ไข:

\s

คำอธิบาย: ค้นหาอักขระช่องว่าง

ลองเลย →

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

ตัวแก้ไข:

\b

คำอธิบาย: ค้นหารายการที่ตรงกันที่จุดเริ่มต้นของคำเช่นนี้: \bWORD หรือที่ท้ายคำ เช่นนี้: WORD\b

ลองเลย →

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

ลองเลย →

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

ตัวแก้ไข:

\uxxxx

คำอธิบาย: ค้นหาอักขระ Unicode ที่ระบุด้วยเลขฐานสิบหก xxxx

ลองเลย →

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

ตัวปริมาณ กำหนดปริมาณ:

ตัวแก้ไข:

n+

คำอธิบาย: จับคู่สตริงใดๆ ที่มีอย่างน้อยหนึ่ง n

ลองเลย →

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

ตัวแก้ไข:

n*

คำอธิบาย: จับคู่สตริงใด ๆ ที่มี n เป็นศูนย์หรือมากกว่านั้น

ลองเลย →

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

ตัวแก้ไข:

n?

คำอธิบาย: จับคู่สตริงใดๆ ที่มี n เป็นศูนย์หรือหนึ่งรายการ

ลองเลย →

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

การใช้วัตถุ RegExp

ใน JavaScript วัตถุ RegExp เป็นวัตถุนิพจน์ทั่วไปด้วย คุณสมบัติและวิธีการที่กำหนดไว้ล่วงหน้า

ใช้การทดสอบ()

วิธีการ test() เป็นวิธีการแสดงออก RegExp

ค้นหารูปแบบสตริงและส่งกลับค่าจริง หรือเท็จขึ้นอยู่กับผลลัพธ์

ตัวอย่างต่อไปนี้ค้นหาสตริงสำหรับอักขระ "e":

ตัวอย่าง

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

เนื่องจากมี "e" ในสตริง ผลลัพธ์ของโค้ดด้านบนจะเป็น:

true

ลองด้วยตัวคุณเอง →

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

คุณไม่จำเป็นต้องใส่นิพจน์ทั่วไปในตัวแปรก่อน ทั้งสอง บรรทัดด้านบนสามารถย่อให้เหลือหนึ่งบรรทัด:

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

การใช้เอ็กเซ็ค()

วิธีการ exec() เป็นวิธีการแสดงออก RegExp

ค้นหาสตริงสำหรับรูปแบบที่ระบุ และส่งกลับข้อความที่พบเป็น วัตถุ

หากไม่พบรายการที่ตรงกัน ระบบจะส่งกลับอ็อบเจ็กต์ (null) ที่ว่างเปล่า

ตัวอย่างต่อไปนี้ค้นหาสตริงสำหรับอักขระ "e":

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

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

กรอกการอ้างอิง RegExp

หากต้องการข้อมูลอ้างอิงฉบับสมบูรณ์ โปรดไปที่ "เสร็จสมบูรณ์" การอ้างอิง JavaScript RegExp

ข้อมูลอ้างอิงประกอบด้วยคำอธิบายและตัวอย่างของ RegExp ทั้งหมด คุณสมบัติและวิธีการ

วัตถุ JavaScript RegExp

สารบัญ

นิพจน์ทั่วไปคืออะไร?

ไวยากรณ์

ตัวอย่าง

การใช้วิธีสตริง

การใช้สตริง search() ด้วยสตริง

ตัวอย่าง

การใช้สตริง search() ด้วยนิพจน์ทั่วไป

ตัวอย่าง

การใช้สตริง replace() ด้วยสตริง

ใช้สตริง replace() ด้วยนิพจน์ทั่วไป

ตัวอย่าง

คุณสังเกตเห็นไหม?

ตัวแก้ไขนิพจน์ปกติ

รูปแบบการแสดงออกปกติ

การใช้วัตถุ RegExp

ใช้การทดสอบ()

ตัวอย่าง

การใช้เอ็กเซ็ค()

ตัวอย่าง

กรอกการอ้างอิง RegExp

การใช้สตริง `search()` ด้วยสตริง

การใช้สตริง `search()` ด้วยนิพจน์ทั่วไป

การใช้สตริง `replace()` ด้วยสตริง

ใช้สตริง `replace()` ด้วยนิพจน์ทั่วไป