Dada una string, la tarea es convertirla en camelCase usando JavaScript. En este caso, el primer carácter de la string convertido a minúsculas y otros caracteres después del espacio se convertirán a mayúsculas.
Enfoque: use el método str.replace() para reemplazar el primer carácter de la string en minúsculas y otros caracteres después del espacio estarán en mayúsculas. Los métodos toUpperCase() y toLowerCase() se utilizan para convertir el carácter de string en mayúsculas y minúsculas respectivamente.
Ejemplo 1: este ejemplo usa los métodos RegExp, toLowerCase() y toUpperCase() para convertir una string en camelCase.
html
<!DOCTYPE html>
<html>
<head>
<title>
How to convert string to camel case in JavaScript ?
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="GFG_UP" style=
"font-size: 15px; font-weight: bold;">
</p>
<button onclick="gfg_Run();">
click here
</button>
<p id="GFG_DOWN" style=
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var str = 'Click the button to convert to camelCase';
el_up.innerHTML = str;
function camelCase(str) {
return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index)
{
return index == 0 ? word.toLowerCase() : word.toUpperCase();
}).replace(/\s+/g, '');
}
function gfg_Run() {
el_down.innerHTML = camelCase(str);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo utiliza los métodos replace(), toLowerCase() y toUpperCase() para convertir una string en camelCase.
html
<!DOCTYPE html>
<html>
<head>
<title>
How to convert string to camel case in JavaScript ?
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="GFG_UP" style=
"font-size: 15px; font-weight: bold;">
</p>
<button onclick="gfg_Run();">
click here
</button>
<p id="GFG_DOWN" style=
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var str = 'Click the button to convert to camelCase';
el_up.innerHTML = str;
function camelCase(str) {
return str
.replace(/\s(.)/g, function(a) {
return a.toUpperCase();
})
.replace(/\s/g, '')
.replace(/^(.)/, function(b) {
return b.toLowerCase();
});
}
function gfg_Run() {
el_down.innerHTML = camelCase(str);
}
</script>
</body>
</html>
Enfoque: use el método reduce() para iterar sobre el carácter de la string y convertirlo en camel case. Los métodos toUpperCase() y toLowerCase() se utilizan para convertir el carácter de string en mayúsculas y minúsculas respectivamente.
Ejemplo 1: este ejemplo utiliza los métodos reduce , toLowerCase() y toUpperCase() para convertir una string en camelCase.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to convert string to camel case in JavaScript ?
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="GFG_UP" style=
"font-size: 15px; font-weight: bold;">
</p>
<button onclick="gfg_Run();">
click here
</button>
<p id="GFG_DOWN" style=
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var str = 'Click the button to convert to camelCase';
el_up.innerHTML = str;
function camelCase(str){
// converting all characters to lowercase
var ans = str.toLowerCase();
// Returning string to camelcase
return ans.split(" ").reduce((s,c)=> s + (c.charAt(0).toUpperCase()+ c.slice(1) ));
}
function gfg_Run() {
el_down.innerHTML = camelCase(str);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
reducir
- Después de hacer clic en el botón:
reducir
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA