How do I know which part of text is changed in an input box?

Question

I have an input box, I hope I can detect the details of what the user modified.

Such as:

• User typed "A" while the box is empty:

  deletedTextCount = 0, deletePosition = -1, insertPosition = 0, insertedText = 'A'

• When "ABCD" is in the box, user put the caret after "C" and hit backspace:

  deletedTextCount = 1, deletePosition = 2, insertPosition = -1, insertedText = ''

• When "ABCD" is in the box, user selected "BC" and pasted "FOO":

  deletedTextCount = 2, deletePosition = 1, insertPosition = 1, insertedText = 'FOO'

Is there a property of the input event can provide these, or I have to calculate those somehow?

 $('#input').on('input', onChange); let before = ''; function onChange(target){ const { value: after } = target.currentTarget; console.log(`before: ${before}, after: ${after}`); let insertedText = ''; let insertPosition = -1; let deletedTextCount = 0; let deletePosition = -1; before = after; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="input" type="text" /> 

Answer 1

EDIT Okay so this doesn't work when working from the middle of the input, but I would suggest a string differentiation library like jsdiff to get a very detailed list of changes.

---

This function will figure out what was changed, added or removed.

 $('#input').on('input', onChange); let before = ''; function onChange(target){ const { value: after } = target.currentTarget; // Length of change, negative if removed const lengthChange = after.length - before.length; let changed; // If added some, get the new stuff if (lengthChange > 0) { changed = after.slice(after.length - lengthChange); // Other wise get the old stuff } else { changed = "-" + before.slice(before.length + lengthChange); } console.log(`before: ${before}, change: ${changed}, after: ${after}`); before = after; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="input" type="text" /> 

Answer 2

After some struggling, I think I kinda sorted it out...

 $('#input').on('input', onChange); let before = ''; function onChange(target){ const { selectionStart: start, value: after } = target.currentTarget; // calculate the different starting points from both direction let p1 = 0, p2 = 0; // calclate the end point first for(; p2 < after.length - start; p2++){ if(before[before.length - 1 - p2] === undefined || before[before.length - 1 - p2] !== after[after.length - 1 - p2]){ break; } } // calclate start point for(; p1 < after.length - p2 - (after.length > before.length ? 1 : 0); p1++){ if(before[p1] !== after[p1] || p1 + p2 >= before.length){ break; } } let insertedText = ''; let insertPosition = -1; let deletedTextCount = 0; let deletePosition = -1; // has delete if(p1 + p2 < before.length){ deletedTextCount = before.length - (p1 + p2); deletePosition = p1; } // has add if(p1 + p2 < after.length){ insertedText = after.substr(p1, after.length - (p1 + p2)); insertPosition = p1; } console.log(`deletePosition: ${deletePosition}, deletedTextCount: ${deletedTextCount}, insertPosition: ${insertPosition}, insertedText: "${insertedText}"`); before = after; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="input" type="text" />