How to convert camelCase string to/from hyphens in javascript


camelCase is an string which second word’s starting letter is Capital, Example is employeeList. This is an short tutorial on Converting camelCase to/from hyphen in JavaScript.

you can

For example, given a string is employeeList, Output converted to dashes.i.e employee-list. so, we have to split the camel case string into words and replace second word onwards with hyphen and update first letter to small case.

You can check my other tutorials on string case conversion

Convert camelCase to hyphens in JavaScript

Following are multiple ways can be implemented to do conversion in JavaScript/typescript.

using regular expression

Regular expressions to split into words and convert first letter of each word into small case expect first string.

let str = 'employeeListOne';
console.log(str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase());

Output:

employee-list-one

param-case npm library

Instead of writing custom logic for this, we can use param-case npm package to do conversion. It is very popular package and most downloaded utility in NodeJS projects.

You can use in Angular,React, Vuejs applications for camel case to hyphen case.

First, Install the package using npm command.

npm install param-case --save

you can import paramCase class as follows

In javascript,

const paramCase=require("param-case");

In typescript

import { paramCase } from "param-case";

you can se pass string to paramCase class as follows

paramCase("emptyString"); //=> "empty-string"
paramCase("twoWords"); //=> "two-words"

Convert Hypen to camelcase in javascript

For example, given input string is in dashed string, array-list and output is in camel case. i.e arrayList.

lodash camelCase method

camelCase is a simple utility method in lodash library which converts given dashed or space string converts into camelcase. Syntax:

camelCase(string)

Input parameter is an string output is string returned in camelCase

var dashString = 'array-list';
result = _.camelCase(dashString); // arrayList
Similar Posts