突出显示用户在 Javascript 中对文本所做的编辑
我正在尝试在页面中创建一个可编辑的文本字段,该字段突出显示用户在编辑文本时对文本所做的编辑。例如,用户插入或更改的文本应该出现在彩色背景下,删除应该通过向相邻字符添加彩色背景(或者可能是某种符号?)来指示......这似乎比我难得多我想在 Javascript 中做到这一点,令我惊讶的是我找不到任何已经实现这样的文本字段的代码。
你知道有什么可以实现我正在寻找的东西吗?
谢谢!
I'm trying to create an editable text field in a page which highlights the edits made by the user to the text as it is being edited. For instance, text inserted or changed by the user should appear against a colored background, deletions should be indicated by adding a colored background to the neighboring characters (or maybe some kind of symbol?)... It seems to be much harder than I thought to do this in Javascript, and I am surprised that I couldn't find any code already implementing such a text field.
Do you know of anything which implements what I'm looking for?
Thanks!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您应该查看 Google 的纯文本差异、匹配和补丁库 它们是开源的,并且可以使用 JavaScript 和其他语言。
差异演示。
You should have a look at Google's Diff, Match and Patch libraries for Plain Text which are open source and available in JavaScript among other languages.
Diff demo.
第1步->
将原始值存储在变量 V1
Step2->
将修改后的值存储在变量 V2
Step3->
对于 V2 中的每个单词 [单词至少被一个空格分隔] 对照 V1 检查它,如果不一样,用 HTML 标签突出显示它!
Step1->
Store the original value in a variable V1
Step2->
Store the modified value in a variable V2
Step3->
For each word in V2 [word are divided by at least a single space] check it against the V1, if it's not same HIGHLIGHT it with HTML tag !