Dada una string que contiene guiones (-) y la tarea es convertir guiones (-) en mayúsculas y minúsculas de una string usando JavaScript.
Acercarse:
- Almacene la string que contiene guiones en variable.
- Luego use RegExp para reemplazar los guiones y haga que la primera letra de las palabras sea mayúscula.
Ejemplo 1: este ejemplo convierte los guiones (‘-‘) en mayúsculas y minúsculas mediante RegExp y el método replace() .
html
<!DOCTYPE HTML>
<html>
<head>
<title>
How to convert hyphens 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: 16px; 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 = "this-is-geeks-for-geeks";
el_up.innerHTML = str;
function gfg_Run() {
el_down.innerHTML = str.replace(/-([a-z])/g,
function (g) { return g[1].toUpperCase(); });
}
</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 es bastante similar al anterior y convierte los guiones (‘-‘) en mayúsculas y minúsculas usando el método RegExp y replace() .
html
<!DOCTYPE HTML>
<html>
<head>
<title>
How to convert hyphens 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: 16px; 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 = "-a-computer-science-portal-for-geeks";
el_up.innerHTML = str;
function gfg_Run() {
el_down.innerHTML = str.replace(/-([a-z])/g,
function (m, s) {
return s.toUpperCase();
});
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA