將每個單詞的第一個字母轉換爲大寫字母JS

我試圖將每個單詞的第一個字母轉換爲大寫，例如：「hello world」應該是「Hello World」。將每個單詞的第一個字母轉換爲大寫字母JS

這是我的代碼到目前爲止。

function test() { 
var doc = document.getElementById("testInput").value; 
var str = doc.replace(/\w\S*/g, doc.charAt(0).toUpperCase() + doc.substring(1).toLowerCase()); 

document.getElementById("tst").innerHTML = str; 
}

而且讓我們說我輸入的「Hello World」，預期的結果是「Hello World」的但我得到的是「世界，你好你好世界」。

所以我的問題是，它只分配第一個單詞，跳過第二個，但它打印兩次。

來源

2017-02-25 Marik

你基本上是與你的級聯複製值。

通過這樣做，你只會被傳遞匹配正則表達式的子串的，然後被替換以下：

function test() { 
    var doc = document.getElementById("testInput").value; 
    var str = doc.replace(/\w\S*/g, function(txt){ return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); }); 

    document.getElementById("tst").innerHTML = str; 
}

來源

2017-02-25 22:22:18

這就像我想要的一樣！但是，你能否解釋一下爲什麼會這樣？「函數（txt）」如何知道它應該將doc作爲參數？ – Marik

'.abc'變成'.Abc'並且'+ abc'變成'+ Abc'是否有效？ –

所以這裏發生的事情是，你只是一次一個地傳遞子串。首先，你自己傳遞「hello」，它被分配給txt變量。然後以「你好」的形式返回。然後，你傳入分配給txt變量的「世界」。然後它被作爲「世界」返回。這提供了「Hello World」的最終結果。 –

String.prototype.toUpperCaseWords = function() { 
    return this.replace(/\w+/g, function(a){ 
     return a.charAt(0).toUpperCase() + a.slice(1).toLowerCase() 
    }) 
    }

用法：

var stringVariable = "First put into a var"; 
stringVariable.toUpperCaseWords(); // Output: First Put Into A Var

來源：https://blog.smalldo.gs/2014/06/easily-add-phps-ucwords-ucfirst-to-javascript/

來源

2017-02-25 22:15:29

不污染'String.prototype'。只需使用一個簡單的命名函數。 –

什麼意思是污染String.prototype？對於不知道那是幹什麼的人，爲什麼比「簡單的命名函數」更糟？ – Marik

嘗試使用：

str.split(" ").map(e => e[0].toUpperCase() + e.slice(1)).join(" ")

來源

2017-02-25 22:15:52

請解釋downvote嗎？ –

你的代碼將**每個**字母大寫，而不僅僅是第一個。 –

我剛剛發佈我的答案，並有實現，它。在發佈答案的幾秒鐘內使用編輯功能是正常的。 –

您可以使用此：

function Capitalize(str){ 
 
    var arr = str.split(" "); 
 
    for(var i = 0; i< arr.length; i++) 
 
    { 
 
    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1); 
 
    } 
 
    var result = arr.join(" "); 
 
    console.log(result); 
 
    } 
 
    
 
    Capitalize("hello world");

你知道你只能通過CSS來做到這一點嗎？

div:hover{ 
 
    text-transform: capitalize; 
 
}

<div> 
 
    hover on me! 
 
</div>

來源

2017-02-25 22:26:03

使用replace，charAt(0).toUpperCase()對於單詞的其餘部分第一個字母和substr(1).toLowerCase()。在input或change事件中執行此操作。如果您想按照您的方式進行操作，請不要使用innerHTML，而應使用textContent。

代碼片段

var inp1 = document.getElementById('input1'); 
 

 

 
inp1.addEventListener('input', function(e) { 
 
    var inp2 = document.getElementById('input2'); 
 
    var text = this.value; 
 
    var res = titleCase(text); 
 
    inp2.value = res; 
 
}, false); 
 

 

 
function titleCase(str) { 
 
    return str.replace(/\w\S*/g, function(txt) { 
 
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); 
 
    }); 
 
}

<input id='input1'> 
 
<input id='input2'>

來源

2017-02-25 22:33:04 zer00ne

爲什麼用textContent代替innerHTML？ – Marik

抱歉沒有解釋，它只是更快。 – zer00ne

我同意，textContent會是更好的選擇。不僅僅是因爲它提供了一些更好的性能，還爲跨站腳本提供了一些保護。 –

將每個單詞的第一個字母轉換爲大寫字母JS

回答

相關問題