How to Capitalize the First Letter of Each Word in JavaScript – a JS Capitalize Tutorial

This article shows how to capitalize the first letter of any word mixed with symbols or non-alphabetic chars in JavaScript. Then capitalize the first letter of every word in the sentence which concatenate or mixed with symbols.

Snippet

/**
 * capitalize string first letter of each word which mixed with symbols
 * @param {string} str
 * @param {string[]} moreSymbols add more symbols
 * @returns
 */
function capitalizer(str, moreSymbols) {
  let symbols = ["-", " "];
  if (Array.isArray(moreSymbols)) {
    // concatenate more symbols
    symbols = [...new Set(symbols.concat(moreSymbols))];
  }
  symbols.forEach((symbol) => {
    str = str
      .split(symbol)
      .map((str) => str.charAt(0).toUpperCase() + str.slice(1))
      .join(symbol);
  });
  return str;
}

Example

Code Playground

full code example at https://codepen.io/dimaslanjaka/pen/wvmbxOG?editors=1010

Current Page Script

HTML

<div>
  <h5>Capitalize Single Word</h5>
  <span id="single" data-str="hello"></span>
  <h5>Capitalize Multiple Words With Spaces</h5>
  <span data-str="hello programming world"></span>
  <h5>Capitalize Multiple Words With Hypens</h5>
  <span data-str="hello-programming-world"></span>
  <h5>Capitalize Multiple Words With Custom Symbol (_)</h5>
  <span data-str="hello_programming_world" data-arguments="_"></span>
  <h5>Capitalize Multiple Words With Custom Multiple Symbol (_|:)</h5>
  <span data-str="hello_programming|world:string|manipulation" data-arguments="_,|,:"></span>
</div>

JS

/**
 * capitalize string first letter of each word which mixed with symbols
 * @param {string} str
 * @param {string[]} moreSymbols add more symbols
 * @returns
 */
function capitalizer(str, moreSymbols) {
  let symbols = ["-", " "];
  if (Array.isArray(moreSymbols)) {
  // concatenate more symbols and unique
  symbols = [...new Set(symbols.concat(moreSymbols))];
  }
  symbols.forEach((symbol) => {
  str = str
    .split(symbol)
    .map((str) => str.charAt(0).toUpperCase() + str.slice(1))
    .join(symbol);
  });
  return str;
}

if (location.host.match(/cdpn|codepen/)) console.clear();
Array.from(document.querySelectorAll("[data-str]")).forEach((el) => {
  const arg = el.getAttribute("data-arguments")
  ? el.getAttribute("data-arguments").split(",")
  : [];
  console.log(arg);
  const str = el.getAttribute("data-str");
  el.innerHTML = `<span style='color:red'>${str}</span> => <span style='color:green'>${capitalizer(
  str,
  arg
  )}</span>`;
});

Conclusion

Congratulations, you learned something new today! In summary, in this article you learned how to:

• access characters from a string
• capitalize the first letter of a word
• split a string into an array of words
• Reconstruct words from an array to form a string
• Accomplish the same task using regular expressions