HiveBrain v1.2.0
Get Started
← Back to all entries
snippetjavascriptTip

Case conversion in JavaScript

Submitted by: @import:30-seconds-of-code··
0
Viewed 0 times
javascriptconversioncase

Problem

Different programming languages and frameworks have different conventions for naming variables, functions and classes. It's often necessary to convert strings between different cases, which is where this guide comes in.
Before we can convert a string to a different case, we need to be able to identify the boundaries between words. While a naive approach could rely on spaces or other delimiters to separate words, this approach is not robust enough to handle all cases. Regular expressions provide a far more robust solution to this problem. After much experimentation, I've found the following regular expression to be the most robust:
This looks intimidating even to me, not gonna lie. Let's break it down into its constituent parts:
  • [A-Z]{2,} matches two or more consecutive uppercase letters. This is useful for identifying acronyms like XML or HTML.
  • (?=[A-Z][a-z]+[0-9]*|\b) is a lookahead assertion that matches a word boundary.

Solution

const r = /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g;


This looks intimidating even to me, not gonna lie. Let's break it down into its constituent parts:
  • [A-Z]{2,} matches two or more consecutive uppercase letters. This is useful for identifying acronyms like XML or HTML.
  • (?=[A-Z][a-z]+[0-9]*|\b) is a lookahead assertion that matches a word boundary.
  • [A-Z]?[a-z]+[0-9]* matches a word starting with an optional uppercase letter, followed by one or more lowercase letters and zero or more digits.
  • [A-Z] matches a single uppercase letter.
  • [0-9]+ matches one or more digits.

Code Snippets

const r = /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g;
const toCamelCase = str => {
  const s =
    str &&
    str
      .match(
        /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
      )
      .map(x => x.slice(0, 1).toUpperCase() + x.slice(1).toLowerCase())
      .join('');
  return s.slice(0, 1).toLowerCase() + s.slice(1);
};

toCamelCase('some_database_field_name'); // 'someDatabaseFieldName'
toCamelCase('Some label that needs to be camelized');
// 'someLabelThatNeedsToBeCamelized'
toCamelCase('some-javascript-property'); // 'someJavascriptProperty'
toCamelCase('some-mixed_string with spaces_underscores-and-hyphens');
// 'someMixedStringWithSpacesUnderscoresAndHyphens'
const toPascalCase = str =>
  str
    .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
    .map(x => x.slice(0, 1).toUpperCase() + x.slice(1).toLowerCase())
    .join('');

toPascalCase('some_database_field_name'); // 'SomeDatabaseFieldName'
toPascalCase('Some label that needs to be pascalized');
// 'SomeLabelThatNeedsToBePascalized'
toPascalCase('some-javascript-property'); // 'SomeJavascriptProperty'
toPascalCase('some-mixed_string with spaces_underscores-and-hyphens');
// 'SomeMixedStringWithSpacesUnderscoresAndHyphens'

Context

From 30-seconds-of-code: string-case-conversion

Revisions (0)

No revisions yet.