CODEWITHSUNDEEP
javascriptregexstringreplacecapitalize
user13493837
user13493837

Reputation:

How to capitalize the first word in each sentence using JavaScript?

This site and the internet are filled with answers to 'how to capitalize every word' but that isn't what I want to do. I couldn't find any answers anywhere to this question. Though it does seem like something that should have been answered well.

Using the previous three sentences as an example, say I had written them as:

this site and the internet are filled with answers to 'how to capitalize every word' but that isn't what I want to do. and I couldn't find any answers anywhere to this question. though it does seem like something that should have been answered well.

I'd like a JS function that will capitalize the three bolded words. Taking into account sentences can end after: '.' '?' or '!'.

I'm using Vue for this project so something that uses Vue would be great but Vanilla JS would be fine as well.

Upvotes: 0

Views: 85

Answers (3)

Peter Seliger
Peter Seliger

Reputation: 13432

The most simple but also reliable approach was to utilize replace with a regular expression like /(?:^|[.!?]\s+)\w/g and its toUpperCaseed matches.

The provided pattern ... / (?:^|[.!?]\s+)\w /g ... reads as follows ...

  • (?:^|[.!?]\s+) ... match a group ( ... ) in a non capturing way (?: ... )

    • ^|[.!?]\s+ ... there are two matching alternatives ... |(or) ...
      • either the beginning of a new line ... ^
      • or a single character which could be either of the character class ... [.!?] ... followed by at least one whitespace ... \s+ ... character (where the \s equivalent is [\r\n\t\f\v \u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]).

  • \w ... match exactly a single word character (where the \w equivalent is [a-zA-Z0-9_]).

  • match everything due to the global modifier flag.

const sampleText = `this site and the internet are filled
with answers to 'how to capitalize every word' but that isn't
what I want to do. and I couldn't find any answers anywhere to
this question? though it does seem like something that should
have been answered well!

this site and the internet are filled with answers to 'how
to capitalize every word' but that isn't what I want to do.
and I couldn't find any answers anywhere to this question?
though it does seem like something that should have been
answered well!

this site and the internet are filled with answers to 'how to
capitalize every word' but that isn't what I want to do.and I
couldn't find any answers anywhere to this question? though it
does seem like something that should have been answered well!`;

console.log(
  sampleText
    // regex ... [https://regex101.com/r/dnB8HA/1]
    .replace(/(?:^|[.!?]\s+)\w/g, match => match.toUpperCase())
);
.as-console-wrapper { min-height: 100%!important; top: 0; }

Upvotes: 1

Estus Flask
Estus Flask

Reputation: 223074

Since there can be several delimiters that need to be preserved, split isn't an option. The alternative easy way is to process each sentence with global replace, where a sentence ends up with punctuation marks followed by a whitespace, and punctuation mark is optional at the end of the string:

sentences.replace(
  /.+?([.?!]+(\s+|$)|$)/g,
  sentence => sentence ? sentence[0].toUpperCase() + sentence.slice(1) : ''
)

Upvotes: 1

Maniraj Murugan
Maniraj Murugan

Reputation: 9084

You can try with the regex pattern /([!.]\s+)([a-z])/g.

The match will be passed to replace callback function to only upper the second capturing group ([a-z]) .

const string = "this site and the internet are filled with answers to 'how to capitalize every word' but that isn't what I want to do. and I couldn't find any answers anywhere to this question. though it does seem like something that should have been answered well.";

const result = string.replace(/([!.]\s+)([a-z])/g, (_, segmentOne, segmentTwo) => segmentOne + segmentTwo.toUpperCase());
console.log(result[0].toUpperCase() + result.slice(1));

Pattern:

([!.]\s+) - Capturing a ! and .

([a-z]) - Capturing lowercase letters.

Upvotes: 0

Related Questions