Highlighting text replacements
I am making an application where the user can perform multiple replacements after one another (eg. replace all "is" with "was", all "will" to "would have").
The problem I am facing UX-wise is how to signify the changes that will happen in the original text. I was thinking about highlighting the pending changes in the original text, as if highlighting text. Each replacement would get its own color.
What I am worried about is that the user would be able to replace all "to" with "an" and then all "anmato" with "pineapple", then "tomato" would first become "anmato" and then "pineapple" (bad example, I know).
Changes would be able to overlap and thus highlighting would become problematic. I am able to figure out an algorithm that would highlight these both with the color of the first replacement, and the color of the second replacement, mixing the colors where they overlap.
I'm not sure if this is the best way to implement this, so I thought I'd ask you guys if you know of a better way.