将每个单词的第一个字母转换为大写字母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

回答

相关问题