I have a textarea, where I want every first letter in each sentence to be capitalized.

Now I have this:

evt.target.value = evt.target.value.replace(/.+?[\.\?\!](\s|$)/g, function(a) {
    return a.charAt(0).toUpperCase() + a.slice(1);
});

And this goes in af function, where evt.target is the textarea, and the function is called on keyup.

It works great, except that it doesn't capitalize instantly. If I write:

Hey. i need some regular expression for this.

then the "I" will capitalize only when i put a period at the end of "this". I would like it to capitalize the "I" instantly after typing it, if it es after an ". >whitespace<" or "! >whitespace<" or "? >whitespace<".

I tried googling a lot of stuff, but unfortunately, this regex stuff is too plicated for me. Could anyone write this correctly, with a quick explanation?

I have a textarea, where I want every first letter in each sentence to be capitalized.

Now I have this:

evt.target.value = evt.target.value.replace(/.+?[\.\?\!](\s|$)/g, function(a) {
    return a.charAt(0).toUpperCase() + a.slice(1);
});

And this goes in af function, where evt.target is the textarea, and the function is called on keyup.

It works great, except that it doesn't capitalize instantly. If I write:

Hey. i need some regular expression for this.

then the "I" will capitalize only when i put a period at the end of "this". I would like it to capitalize the "I" instantly after typing it, if it es after an ". >whitespace<" or "! >whitespace<" or "? >whitespace<".

I tried googling a lot of stuff, but unfortunately, this regex stuff is too plicated for me. Could anyone write this correctly, with a quick explanation?

• javascript
• regex

• 2 Maybe .replace(/([!?.]\s+)([a-z])/g, function(m, $1, $2) {return $1+$2.toUpperCase();})? – Wiktor Stribiżew Commented Oct 7, 2016 at 13:58
• I remend you www.regex101. for regex testing... – Emilio Grisolía Commented Oct 7, 2016 at 14:00

2 Answers 2

I'm late, but maybe somebody needs jQuery code for it. That works for first sentence too.

$('input').on('input', function (evt) {
    var $this = $(evt.target),
        re = /(^|[.!?]\s+)([a-z])/g,
        val = $this.val().replace(re, function (m, $1, $2) {
            return $1 + $2.toUpperCase();
        });
    $this.val(val);
});

https://jsfiddle/chukanov/oqg5o88u/1/

es6 update:

let re = /(^|[.!?]\s+)([a-z])/g;
$('input').on('input', function (evt) {
  let $this = $(this),
      val = $this.val().replace(re, (m, $1, $2) => $1 + $2.toUpperCase());
  $this.val(val);
});

https://jsfiddle/chukanov/oqg5o88u/27/

I suggest using /([!?.]\s+)([a-z])/g regex and pass the match to the replace callback function to only upper the second capturing group:

let log  = document.querySelector('#log'),
    test = document.querySelector('#test');

test.addEventListener('input', e => {
    log.innerHTML = e.target.value.replace(/([!?.]\s+)([a-z])/g, function(m, $1, $2) {
        return $1+$2.toUpperCase();
    });
});

<input type='text' id='test' autofocus /><br />
<span id='log'></span>

Pattern details:

• ([!?.]\s+) - Group 1 capturing a !, ? or . and 1 or more whitespaces (NOTE that replacing + with *, zero or more whitespaces will be allowed)
• ([a-z]) - Group 2 capturing lowercase ASCII letters.