Javascript: title Case with replace method

Question

I want to convert the given string to a title case:

const titleCase = function (text) {
  if (text === "") return "";
  let textArr = text.split(" ");
  const outputArr = textArr.map(
    ele => ele.toLowerCase().replace(ele[0], ele[0].toUpperCase())
  );
  const output = outputArr.join(" ");
  return output;
};

const test1 = titleCase("this is an example"); 
const test2 = titleCase("WHAT HAPPENS HERE");
console.log(test1);
console.log(test2);

test1 gives me the right result This Is An Example but test2 returns what happens here which is not the result that I want.

I am confused... where did it go wrong?

"which is not the result that I want" --- you have not explained what you want. — zerkms, Oct 25 '22 at 01:00
@zerkms OP says _"title case"_ so I imagine _"What Happens Here"_ — Phil, Oct 25 '22 at 01:01
Fair . @Ben could you please [edit] your question to explain the result you want, just for clarity — Phil, Oct 25 '22 at 01:02
@Ben in your code you `ele.toLowerCase()` but then you refer to the _original_ character in the `ele[0]` (twice). If you want to implement it that way - you should `ele[0].toLowerCase()` — zerkms, Oct 25 '22 at 01:05
Your issue is that `ele[0]` is no longer in the lowercased string — Phil, Oct 25 '22 at 01:05
FYI converting strings to title case has [many existing solutions](https://stackoverflow.com/q/196972/283366) — Phil, Oct 25 '22 at 01:11
Does this answer your question? [Convert string to Title Case with JavaScript](https://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript) — jsejcksn, Oct 25 '22 at 01:28
_"Where did it go wrong?"_ is _exactly_ the kind of question that a debugger is good at helping you answer. You should learn how to use your debugger to inspect the pieces of a large expression like `ele.toLowerCase().replace(ele[0], ele[0].toUpperCase())`. In the case where an expression isn't working as you expected, you can break it into smaller pieces and assign sub-expressions to variables with meaningful names so that you can inspect them or log them. I think you would have figured this out yourself if you had done some debugging. It takes effort, but as devs, we should all learn how. — Wyck, Oct 25 '22 at 01:57
@Wyck Totally agreed! "Breaking into smaller pieces." This enlightened me. Thank you, Wyck! — Ben, Oct 25 '22 at 03:04

richardjmorton · Accepted Answer · 2022-10-25T01:16:51.403

3

When you run it on the test2 string, each ele in your map function is the upper case word. When you attempt to replace ele[0] in your function, it is looking for the upper case character in a string that has no upper case letters. ie with 'WHAT' you're looking to replace ele[0] which is W in the string what. Try:

ele => ele.toLowerCase().replace(ele[0].toLowerCase(), ele[0].toUpperCase())

edited Oct 25 '22 at 01:16

answered Oct 25 '22 at 01:08

richardjmorton

311
2
7

2

I would have tackled the problem earlier on in the process, by doing `let textArr = text.toLowerCase().split(" ");` – Wyck Oct 25 '22 at 01:37
That answered my question! I finally understand how replace works in JS, thank you so much Richard :) – Ben Oct 25 '22 at 02:43
1

@Ben, please try to use simple solution using chatAt and slice. – Danylo Levada Oct 25 '22 at 02:51
@Wyck I should've done this way :( Your approach is better, Wyck. Thank you! – Ben Oct 25 '22 at 02:55
@Topdev I tried and it worked! Will use that, thank you! – Ben Oct 25 '22 at 02:59

score 3 · Answer 2 · answered Oct 25 '22 at 01:20

You can turn a string to lowerCase before, and then make the code more readable:

const titleCase = string => string
  .toLowerCase()
  .split(' ')
  .map(i => i.charAt(0).toUpperCase() + i.slice(1))
  .join(' ')

or es5:

function titleCase(string) {
  return string
    .toLowerCase()
    .split(" ")
    .map(function (i) {
      return i.charAt(0).toUpperCase() + i.slice(1);
    })
    .join(" ");
}

Javascript: title Case with replace method

2 Answers2