突出显示用户在Javascript中对文本所做的编辑

突出显示用户在Javascript中对文本所做的编辑,javascript,jquery,html,editor,diff,Javascript,Jquery,Html,Editor,Diff,我试图在页面中创建一个可编辑的文本字段,该字段在编辑文本时突出显示用户对文本所做的编辑。例如,用户插入或更改的文本应显示在彩色背景下,删除应通过向相邻字符(或某种符号?)添加彩色背景来表示。。。在Javascript中实现这一点似乎比我想象的要困难得多,我感到惊讶的是,我找不到任何已经实现这样一个文本字段的代码 你知道有什么东西能实现我想要的吗 谢谢 Step1-> 将原始值存储在变量V1中 Step2-> 将修改后的值存储在变量V2中 Step3-> 对于V2中的每个单词[单词被至少一个空格分

我试图在页面中创建一个可编辑的文本字段,该字段在编辑文本时突出显示用户对文本所做的编辑。例如,用户插入或更改的文本应显示在彩色背景下,删除应通过向相邻字符(或某种符号?)添加彩色背景来表示。。。在Javascript中实现这一点似乎比我想象的要困难得多,我感到惊讶的是,我找不到任何已经实现这样一个文本字段的代码

你知道有什么东西能实现我想要的吗

谢谢

Step1->

将原始值存储在变量V1中

Step2->

将修改后的值存储在变量V2中

Step3->


对于V2中的每个单词[单词被至少一个空格分隔],请对照V1检查它,如果不一样,请使用HTML标记突出显示它

你应该看看谷歌的开源软件,它可以用JavaScript和其他语言提供


.

我们希望在用户编辑文本字段时执行此操作,而在每次编辑操作时计算差异是无效的。在这种情况下,您需要在keypress、keyup事件中对其进行监控!这并不能解决性能问题。在每次按键和按键事件中计算整个文本的两个版本的差异是不令人满意的。这确实是唯一的方法-在按键后等待2秒,然后比较,直到有更改,突出显示该更改,然后重复…我使用
diff\u match\u patch
用于类似的目的,并最终创建了一个包装器库来帮助使用差异匹配补丁所需的“演示工作”: