อักษรตัวแรกของตัวแปรตัวพิมพ์ใหญ่


90

ฉันค้นหาผ่านเว็บแล้วไม่พบสิ่งใดที่จะช่วยฉันได้ ฉันต้องการสร้างตัวอักษรตัวแรกของแต่ละคำตัวพิมพ์ใหญ่ภายในตัวแปร

จนถึงตอนนี้ฉันได้ลองแล้ว:

toUpperCase();

และไม่มีโชคเพราะตัวพิมพ์ใหญ่ทุกตัวอักษร


คำตอบ:


229

ใช้ฟังก์ชัน.replace[MDN]เพื่อแทนที่อักษรตัวพิมพ์เล็กที่ขึ้นต้นคำด้วยอักษรตัวใหญ่

var str = "hello world";
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});
alert(str); //Displays "Hello World"


แก้ไข: หากคุณกำลังจัดการกับอักขระคำอื่นที่ไม่ใช่แค่ az นิพจน์ทั่วไป (ซับซ้อนกว่า) ต่อไปนี้อาจเหมาะกับวัตถุประสงค์ของคุณมากกว่า

var str = "петр данилович björn über ñaque αλφα";
str = str.toLowerCase().replace(/^[\u00C0-\u1FFF\u2C00-\uD7FF\w]|\s[\u00C0-\u1FFF\u2C00-\uD7FF\w]/g, function(letter) {
    return letter.toUpperCase();
});
alert(str); //Displays "Петр Данилович Björn Über Ñaque Αλφα"


1
นี้ไม่ได้ทำงานที่มีชื่อเช่นนี้จะกลายเป็นBjörn Lüchinger BjöRn LüChingerการแก้ไขใด ๆ สำหรับสิ่งนี้?
Dediqated

2
@Dediqated ขอบคุณที่ชี้ให้เห็นแจ้งให้เราทราบหากการแก้ไขช่วยได้
Peter Olson

ใช้งานได้ดี! คำแนะนำใด ๆ เกี่ยวกับสิ่งที่ควรแก้ไขหากฉันแค่ต้องการแปลงเป็นตัวพิมพ์ใหญ่อักขระตัวแรกของสตริง (แทนทุกคำ)
Andres SK

6
@andufo แน่นอนว่ามันง่ายกว่ามากที่จะทำ เพียงแค่ใช้str[0].toUpperCase() + str.slice(1)
Peter Olson

@PeterOlson ขอบคุณสำหรับคำตอบ! ฉันใช้var first = str.slice(0, str.indexOf(' ')); str = first.toLowerCase().replace(/^[\u00C0-\u1FFF\u2C00-\uD7FF\w]|\s[\u00C0-\u1FFF\u2C00-\uD7FF\w]/g, function(letter) { return letter.toUpperCase(); }) + str.substr(first.length);เพื่อปกปิดอักขระพิเศษด้วย
Andres SK

73

วิธีที่ง่ายกว่ามาก:

$('#test').css('textTransform', 'capitalize');

ฉันต้องให้เครดิต @Dementic ในการพาฉันไปสู่เส้นทางที่ถูกต้อง ง่ายกว่าสิ่งที่พวกคุณเสนอ


32
สิ่งนี้จะเปลี่ยนเฉพาะการแสดงภาพของสตริงไม่ใช่ค่าสตริงเอง
toxaq

1
คุณไม่สามารถใช้สิ่งนี้กับตัวแปรที่ดึงมาจาก DB ได้ แต่สำหรับอินสแตนซ์อื่น ๆ วิธีนี้สะอาดมาก
Armand

3
หมายเหตุ: text-transform:capitalizeจะไม่มีผลกับ CAPS ทั้งหมด
Bob Stein

1
จะเกิดอะไรขึ้นถ้าต้องใช้สตริง (ตัวแปร) สำหรับการดำเนินการบางอย่างนอกเหนือจากการแสดงผล?
Fr0zenFyr

โปรดทราบว่ามันจะบันทึกอินพุตด้วยตัวพิมพ์ใหญ่มันจะแปลงในมุมมองเท่านั้น
Sherif Elkassaby

25

http://phpjs.org/functions/ucwords:569มีตัวอย่างที่ดี

function ucwords (str) {
    return (str + '').replace(/^([a-z])|\s+([a-z])/g, function ($1) {
        return $1.toUpperCase();
    });
}

(ละเว้นฟังก์ชั่นความคิดเห็นจากแหล่งที่มาสำหรับความกะทัดรัดโปรดดูแหล่งที่มาที่เชื่อมโยงสำหรับรายละเอียด)

แก้ไข: โปรดทราบว่าฟังก์ชันนี้ใช้ตัวพิมพ์ใหญ่ตัวอักษรตัวแรกของแต่ละคำ (ตามที่คุณถาม) ไม่ใช่แค่ตัวอักษรตัวแรกของสตริง (ตามที่ชื่อคำถามของคุณถาม)


วิธีนี้ใช้ได้ผลดีกว่าวิธีแก้ปัญหาเดียวที่ยอมรับซึ่งใช้อักษรตัวพิมพ์ใหญ่ในประโยคหลังเครื่องหมายวรรคตอนดังนั้นเช่น "ฉันเป็นตัวอย่าง" กลายเป็น "ฉันเป็นตัวอย่าง"
lizardhr

ใช้ไม่ได้หากคุณมีขีดล่างในสตริงเดิมโปรดเพิ่มลงใน REGEX เพื่อประสิทธิภาพที่ดีขึ้น TY
Ruslan Abuzant

1
@RuslanAbuzant นั่นจะตอบคำถามที่แตกต่างออกไป การตีความขีดล่างเป็นตัวคั่นคำ (หรือช่องว่างทั่วไป) นั้นใช้ได้ แต่ไม่ใช่สิ่งที่ OP ขอ ... และอาจทำลายกรณีการใช้งานของเขา
Jonathan Fingland

1
ucwords () ห่วย ใช้ไม่ได้กับ Unicode (โดยเฉพาะกับซิริลลิกกรีกและตัวอักษรอื่น ๆ ในยุโรปกลาง) ใช้ mb_convert_case () ที่แบ็คเอนด์ได้ดีกว่าเช่น: mb_convert_case ($ _ POST ['name'], MB_CASE_TITLE, 'utf-8');
Aleksey Kuznetsov

15

แค่ต้องการเพิ่มโซลูชัน javascript บริสุทธิ์ (ไม่มี JQuery)

function capitalize(str) {
  strVal = '';
  str = str.split(' ');
  for (var chr = 0; chr < str.length; chr++) {
    strVal += str[chr].substring(0, 1).toUpperCase() + str[chr].substring(1, str[chr].length) + ' '
  }
  return strVal
}

console.log(capitalize('hello world'));


1
ขอบคุณครับเพียงแค่ต้องการแก้ไขบางสิ่งบางอย่าง นี่c < str.length;ควรจะเป็นchr < str.length;
Leysam Rosario

13

ฉันคิดว่าคุณสามารถใช้สตริงย่อย () และ toUpperCase () เพื่อดึงอักขระตัวแรกตัวพิมพ์ใหญ่ออกจากนั้นแทนที่อักขระตัวแรกของสตริงของคุณด้วยผลลัพธ์

myString = "cheeseburger";
firstChar = myString.substring( 0, 1 ); // == "c"
firstChar.toUpperCase();
tail = myString.substring( 1 ); // == "heeseburger"
myString = firstChar + tail; // myString == "Cheeseburger"

ฉันคิดว่าน่าจะเหมาะกับคุณ สิ่งที่ควรพิจารณาอีกประการหนึ่งคือหากข้อมูลนี้กำลังแสดงคุณสามารถเพิ่มคลาสลงในคอนเทนเนอร์ที่มีคุณสมบัติ CSS "text-transform: capitalize"


ไม่ควรมีเช่น firstChar = firstChar.toUpperCase (); เหรอ? ฉันลองใช้รหัสใน Node.js แล้วและฉันต้องทำอย่างนั้นหรือไม่มีอะไรเปลี่ยนแปลง!
Adrian Adaine

9

ในการทำเช่นนี้คุณไม่จำเป็นต้องใช้ Javascript จริงๆหากคุณจะใช้

$('#test').css('textTransform', 'capitalize');

ทำไมไม่ทำเช่นนี้ในรูปแบบ css เช่น

#test,h1,h2,h3 { text-transform: capitalize; }

หรือทำเป็นคลาสแล้วใช้คลาสนั้นได้ทุกที่ที่คุณต้องการ

.ucwords { text-transform: capitalize; }

4
ยินดีต้อนรับสู่ Stackoverflow คำตอบของคุณกำลังแนะนำทางเลือกอื่น (ซึ่งอาจใช้ได้อย่างสมบูรณ์ในบางกรณีการใช้งาน) แต่ไม่ได้ตอบคำถามจริงๆ ตามที่ฉันเข้าใจคำถามผู้เขียนต้องการเปลี่ยนตัวแปร Javascript จริง ๆ ไม่ใช่แค่การแสดงภาพเท่านั้น
helmbert

3
ใช่ แต่คนอื่น ๆ ที่เข้ามาในคำถามนี้อาจจะโอเคกับคำตอบของ javascript หรือ css เหมือนฉันและนี่ก็เป็นประโยชน์จริงๆ ...
Brian Powell

6

เคยได้ยินsubstr()ไหม?

สำหรับผู้เริ่มต้น:

$("#test").text($("#test").text().substr(0,1).toUpperCase()+$("#test").text().substr(1,$("#test").text().length));


[อัปเดต:]

ขอบคุณ@FelixKlingสำหรับเคล็ดลับ:

$("#test").text(function(i, text) {
    return text.substr(0,1).toUpperCase() + text.substr(1);
});

4
แทนที่จะโทรtext() สี่ครั้งให้ส่งฟังก์ชันไปที่text():$("#test").text(function(i, text) { return text.substr(0,1).toUpperCase()+text.substr(1);});
Felix Kling

1
ขุดศพเก่า ๆ ที่นี่ แต่ถ้ารู้ว่าเนื้อหาเข้าสู่องค์ประกอบก็จะใช้งานได้ง่ายกว่ามาก:$('#test').style.textTransform='capitalize';
Rafael Herscovici

ปิด @Dementic แต่ควรเป็น: $('#test').css('textTransform', 'capitalize'); BTW นี่คือคำตอบที่ดีที่สุดที่นี่ ฉันจะส่งเป็นคำตอบ
vbullinger

@vbullinger - อย่าตัดสินรหัสของฉันเมื่อฉันเขียนว่าเมาเหมือนนรก :) และฉันรัก js ไม่ใช่ jq ดังนั้นรหัสของฉันผิด แต่ก็ไม่มากเกินไปdocument.getElementById('test').style.textTransform='capitalize';
Rafael Herscovici

5

จากคำตอบของ @ peter-olson ฉันใช้วิธีเชิงวัตถุมากขึ้นโดยไม่ใช้ jQuery:

String.prototype.ucwords = function() {
    return this.toLowerCase().replace(/\b[a-z]/g, function(letter) {
        return letter.toUpperCase();
    });
}

alert("hello world".ucwords()); //Displays "Hello World"

ตัวอย่าง: http://jsfiddle.net/LzaYH/1/


นี่เป็นวิธีที่เหมาะสมที่สุดในความคิดของฉัน ฉันจะเรียกมันว่าtoUpperCaseWordsสอดคล้องกับจาวาสคริปต์toUpperCase()และtoLowerCase()
AB Carroll

5

วิธีที่ง่ายที่สุด

let str="hiren raiyani"
str.toLowerCase().replace(/(?<= )[^\s]|^./g, a => a.toUpperCase());

ฟังก์ชันที่ผู้ใช้กำหนดเอง:

function capitalize(str){
 return str.toLowerCase().replace(/(?<= )[^\s]|^./g, a => a.toUpperCase());
}

เอาต์พุต: Hiren Raiyani

ใช้รหัสเป็นฟังก์ชันที่ผู้ใช้กำหนดเองหรือโดยตรง



3
var ar = 'foo bar spam egg'.split(/\W/);
for(var i=0; i<ar.length; i++) {
  ar[i] = ar[i].substr(0,1).toUpperCase() + ar[i].substr(1,ar[i].length-1) 
}
ar.join(' '); // Foo Bar Spam Egg

3

คุณสามารถลองใช้โค้ดง่ายๆนี้ด้วยคุณสมบัติของ ucwords ใน PHP

function ucWords(text) {
    return text.split(' ').map((txt) => (txt.substring(0, 1).toUpperCase() + txt.substring(1, txt.length))).join(' ');
}
ucWords('hello WORLD');

มันจะทำให้เคสด้านบนไม่เปลี่ยนแปลง



2

จากคำตอบของ @Dementric อย่างสมบูรณ์โซลูชันนี้พร้อมที่จะเรียกด้วยวิธี jQuery ง่ายๆ 'ucwords' ... ขอบคุณทุกคนที่มีส่วนร่วมที่นี่ !!!

$.extend({
ucwords : function(str) {
    strVal = '';
    str = str.split(' ');
    for (var chr = 0; chr < str.length; chr++) {
        strVal += str[chr].substring(0, 1).toUpperCase() + str[chr].substring(1, str[chr].length) + ' '
    }
    return strVal
}

});

ตัวอย่าง: สามารถเรียกได้โดยใช้วิธีการ

var string = "this is a test";
string = $.ucwords(string); // Returns "This Is A Test"

2

คุณสามารถใช้text-transform: capitalize;สำหรับงานนี้ -

HTML -

<input type="text" style="text-transform: capitalize;" />

JQuery -

$(document).ready(function (){
   var asdf = "WERTY UIOP";
   $('input').val(asdf.toLowerCase());
});

ลองสิ่งนี้

หมายเหตุ: เพียงแค่เปลี่ยนการแสดงภาพของสตริง หากคุณแจ้งเตือนสตริงนี้ระบบจะแสดงค่าดั้งเดิมของสตริงเสมอ


0

สตริงที่จะลดลงก่อนตัวอักษรตัวแรกเป็นตัวพิมพ์ใหญ่

(ทั้งสองใช้ไวยากรณ์ Jquery)

function CapitaliseFirstLetter(elementId) {
    var txt = $("#" + elementId).val().toLowerCase();
    $("#" + elementId).val(txt.replace(/^(.)|\s(.)/g, function($1) {
    return $1.toUpperCase(); }));
    }

นอกจากฟังก์ชั่นในการใช้ประโยชน์จากสตริง WHOLE แล้ว:

function CapitaliseAllText(elementId) {
     var txt = $("#" + elementId).val();
     $("#" + elementId).val(txt.toUpperCase());
     }

ไวยากรณ์ที่จะใช้กับเหตุการณ์คลิกของกล่องข้อความ:

onClick="CapitaliseFirstLetter('TextId'); return false"

0

ฉันใช้รหัสนี้ -

function ucword(str){
    str = str.toLowerCase().replace(/(^([a-zA-Z\p{M}]))|([ -][a-zA-Z\p{M}])/g, function(replace_latter) { 
        return replace_latter.toUpperCase();
    });  //Can use also /\b[a-z]/g
    return str;  //First letter capital in each word
}

var uc = ucword("good morning. how are you?");
alert(uc);

0

Html:

<input class="capitalize" name="Address" type="text" value="" />

Javascript กับ jQuery:

$(".capitalize").bind("keyup change", function (e) {
        if ($(this).val().length == 1)
            $(this).val($(this).val().toUpperCase());
        $(this).val($(this).val().toLowerCase().replace(/\s[\p{L}a-z]/g, function (letter) {
            return letter.toUpperCase();
        }))
    });



0

ต่อไปนี้คือฟังก์ชัน ucwords () ที่ปลอดภัยสำหรับรหัส Unicode ซึ่งยังนับถือชื่อสองนามสกุลเช่น Russian Засс-Ранцевและชื่อชั้นสูงบางชื่อเช่นHonoré de Balzac, d'Artagnan, Vincent van Gogh, Otto von Bismarck, Sulaymān ibn Dāwūdเป็นต้น:

String.prototype.ucwords = function() {
  return this.toLowerCase()
    .replace(/(^|\s|\-)[^\s$]/g, function(m) {
       return m.toUpperCase();
    })
    // French, Arabic and some noble names...
    .replace(/\s(Of|De|Van|Von|Ibn|Из|Ван|Фон|Ибн)\s/g, function(m) { // Honoré de Balzac, Vincent van Gogh, Otto von Bismarck, Sulaymān ibn Dāwūd etc.
       return m.toLowerCase();
    })
    .replace(/(^|\s)(D|Д)(['’][^\s$])/g, function(m, p1, p2, p3) { // D'Artagnan or d'Artagnan / Д’Артаньян или д’Артаньян
       return p1 + (p1 === "" ? p2/*.toUpperCase()*/ : p2.toLowerCase()) + p3.toUpperCase();
    });
}

0

วิธีที่ง่ายที่สุดในการพิมพ์อักษรตัวแรกใน JS

var string = "made in india";

string =string .toLowerCase().replace(/\b[a-z]/g, function(letter){return  letter.toUpperCase();});

alert(string );

ผลลัพธ์: "ผลิตในอินเดีย"


0
var country= $('#country').val();

var con=country[0].toUpperCase();

ctr= country.replace(country[0], con);
   

ไม่จำเป็นต้องสร้างฟังก์ชั่นใด ๆ เพียงแค่ jugaaar

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