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(start,length) and substring(start,end) 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) {
				var subInterval = selEnd - i;
				var interval = curLen - preLen;
				if (interval>subInterval) {
					return curr.substring(i, selEnd+(interval-subInterval));
				}
				else{
					return curr.substring(i, selEnd);
				}
				
			}
		}
		
		return curr.substring(0, selEnd);
	}

var prevText = "";

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

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