JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="input" value="this is a text. hello world!" />
<button type="button" id="button">
	Process
</button>
<div id="output"></div>

CSS

#input{
	width:100%;
	margin:10px 0;
}
button{
	margin: 10px 0;
}
#output{
	height:400px;
	padding:20px;
	border:1px solid black;
}

JavaScript

var inputEl = document.getElementById('input');
var outputEl = document.getElementById('output');
var button = document.getElementById('button');

function sentenceCase(input, lowercaseBefore) {
    input = ( input === undefined || input === null ) ? '' : input;
    if (lowercaseBefore) { input = input.toLowerCase(); }
    return input.toString().replace( /(^|\. *)([a-z])/g, function(match, separator, char) {
        // return separator + char.toUpperCase();
		return match.toUpperCase();
    });
}

function process(){
	outputEl.innerHTML = sentenceCase(inputEl.value);
}

button.addEventListener('click', process);