JSFiddle - React, Tailwind, and code Playground

by Liu David

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<div id="result">Start inputing...</div>

JavaScript

function getInputedString(prev, curr, selEnd) {
		if (selEnd === 0) {
		  return "";
		}
		//note: substr() and substring() are different
		var preLen = prev.length;
		var curLen = curr.length;
		var index = (preLen > selEnd) ? selEnd : preLen;
		var subStrPrev;
		var subStrCurr;
		for(i=index; i > 0; i--){
			subStrPrev = prev.substr(0, i);
			subStrCurr = curr.substr(0, i);
			if (subStrCurr === subStrPrev) {
				return curr.substring(i, selEnd);
			}
		}
		
		return curr.substring(0, selEnd);
}

var prevText = "";

$("input").on('input', function() {
  var lastInput = getInputedString(prevText, this.value, this.selectionEnd);
  prevText = this.value;

  $("#result").text("Last input: " + lastInput);
});