แทนที่ช่องว่างด้วยเครื่องหมายขีดกลางและทำให้อักษรตัวเล็กเป็นตัวพิมพ์เล็กทั้งหมด


247

ฉันต้องการฟอร์แมตสตริงใหม่โดยใช้ jQuery หรือ vanilla JavaScript

"Sonic Free Games"สมมติว่าเรามี

"sonic-free-games"ฉันต้องการที่จะแปลงเป็น

ดังนั้นช่องว่างควรถูกแทนที่ด้วยเครื่องหมายขีดกลางและตัวอักษรทั้งหมดที่แปลงเป็นอักษรตัวเล็ก

โปรดให้ความช่วยเหลือในเรื่องนี้?

คำตอบ:


549

เพียงใช้สตริงreplaceและtoLowerCaseเมธอดตัวอย่างเช่น:

var str = "Sonic Free Games";
str = str.replace(/\s+/g, '-').toLowerCase();
console.log(str); // "sonic-free-games"

สังเกตว่าการgตั้งค่าสถานะบนRegExpมันจะทำการแทนที่ทั่วโลกภายในสายอักขระถ้าไม่ได้ใช้จะมีการแทนที่เกิดขึ้นครั้งแรกเท่านั้นและยังที่RegExpจะจับคู่อักขระช่องว่างสีขาวอย่างน้อยหนึ่งตัว


52
ชุดรูปแบบที่ฉันใช้กับ \ W ซึ่งแทนอักขระที่ไม่ใช่ตัวเลขและตัวอักษรใด ๆ สิ่งนี้มีประโยชน์สำหรับบางสิ่งเช่น 'ร้านขายของชำ A&P' ซึ่งจะกลายเป็น 'ร้านขายของชำ' str.replace(/\W+/g, '-').toLowerCase();
Adam Waselnuk

1
ใจไม่ได้อ้างถึงส่วน regexp คือreplace(/\s+/g, ..และไม่ replace('/\s+/f', .. (โดยไม่มีเครื่องหมายอัญประกาศ)
Attila Fulop

ถ้าฉันต้องการลบช่องว่างที่จุดเริ่มต้นและจุดสิ้นสุดของสตริง
Romel Indemne

@RomelIndemne ทุกวันนี้คุณสามารถใช้String.prototype.trimวิธีการ:str.trim().replace(/\s+/g, '-').toLowerCase()
CMS

ขอบคุณมาก ๆ ตอนนี้ฉันต้องการวิธีอื่น ๆ รอบ ๆ xD JK
lawphotog

34

คำตอบข้างต้นอาจทำให้สับสนเล็กน้อย วิธีการสตริงจะไม่แก้ไขวัตถุต้นฉบับ พวกเขากลับวัตถุใหม่ มันจะต้อง:

var str = "Sonic Free Games";
str = str.replace(/\s+/g, '-').toLowerCase(); //new object assigned to var str

10
ฉันคิดว่ามันเป็นสิ่งสำคัญที่จะต้องทราบว่าคำตอบที่ยอมรับได้รับการแก้ไขเพื่อรวมแนวคิดนี้
Dexygen

31

คุณยังสามารถใช้splitและjoin:

"Sonic Free Games".split(" ").join("-").toLowerCase(); //sonic-free-games

ระวังกรณีด้านข้างเช่นที่ที่มีพื้นที่ว่างตอนต้นพวกเขาจะไม่ถูกแทนที่
Bonjour123

1

@ คำตอบของ CMS นั้นใช้ได้ แต่ฉันต้องการที่จะทราบว่าคุณสามารถใช้แพคเกจนี้: https://github.com/sindresorhus/slugifyซึ่งทำเพื่อคุณและครอบคลุมกรณีขอบจำนวนมาก (เช่น umlauts เยอรมัน, เวียดนาม, อาหรับ , รัสเซีย, โรมาเนีย, ตุรกี, ฯลฯ )


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.