Find the difference between two sets of text with JavaScript
ykdojo opened this issue · comments
Example:
- Original text: I had aweesome breakfast tooday.
- Edited text: I had awesome breakfast today.
Given these two sets of text, we should be able to find the difference with JavaScript. And show the difference in UI. This way, it'll be easy to see how the original text has been edited.
In this case, it should look like this: I had awe<e>some breakfast to<o>day.
(Where <e> and <o> have strikethrough over them)
Hi @ykdojo . Can I be assigned to this please ?
And, I think, added characters in the edited text should also be highlighted with maybe something like greenish background color.
Original text: I had aweesome breakfast tooday.
Edited text: I had an awesome breakfast today.
So it may give an output like this:
<p>I had <span class="appended">an</span> awe<span class="deleted">e</span>some breakfast to<span class="deleted">o</span>day.
Where the appended words/chars are wrapped in a span with class .appended, and deleted words/chars are wrapped in a span with class .deleted.
That sounds perfect! I tried assigning this to you on GitHub, but it didn't work for some reason. Feel free to just start working on it and send a pull request when it's ready :)
Found this library, but not sure if it would be a good fit for this: https://github.com/jhchen/fast-diff
Maybe it would be better/simpler to just implement this ourselves? That way, it'll be easier to tweak it as we go, too. I just don't like how most of these libraries are really complex to read and edit... Anyway, I'll think about this some more.
Started working on this today.
Pretty raw and it might be hard to read, but I have some code here already: https://github.com/ykdojo/text_difference_finder
@justafrank hey sorry I thought I'd submitted my comments already. I just sent them again.
I was thinking of implementing something on my own and comparing it to yours.
Here are some examples for testing, in English:
-
Hello I’m looking of the group for learn english.
-> Hello, I’m looking for a group to learn English with. -
what book are you reading ? i want to start this one… what do you think about ?
-> What book are you reading? I want to start this one… What do you think about it? -
who helps me for improving my English?
-> Can anyone help me improve my English? -
I am waiting for snow from this morning until now.
-> I’ve been waiting for snow since this morning. -
even I have French nationality. I still make mistake when I write my own sentences .
-> Even though I’m French, I still make mistakes when I write in French.
And some test cases in Japanese:
- 日本語でも英語でもドラマよく見ている。
-> 日本語でも英語でもドラマをよく見ています。 - きのうのばんごはんはとてもおいしかたです。
-> きのうのばんごはんはとてもおいしかったです。 - わたしのしごとのま、わたいはそうだいなけしきをみました
-> しごとのあいまにきれいなけしきをみました。 - 知らない人とお喋りのが怖いです。
-> 知らない人とお喋りするのが怖いです。 - Duolingoは本とに凄いアプリです。
-> Duolingoは本当に凄いアプリです。 - 今朝はとても寒い！冬ははやく来る。
-> 今朝はとても寒いですね！冬がもうすぐ来そうです。
I'm starting to think, ideally, there should be a custom solution for splitting a sentence into words for each language.
Splitting by spaces work well for English, but it won't work well for Japanese, for example.
I think splitting a Japanese sentence into individual characters works well enough for now though.
I changed a few lines of code, which split the strings by character. Having the option to split by words or character should be enough to cover most languages, I think.
Should I submit another pull request?
Sure, that sounds perfect.
I made my own version here, so I might pick yours or mine, or try merge them later on.
So one of the reasons I wanted to make my own version is because I wanted to learn how it works myself, and another reason is just because I wanted to make a video about it.
Anyway, I think it's good to have multiple solutions available to choose from :)
Solved this in my last video. I'll close this issue for now. https://youtu.be/4SP_AY7GGxw
Also thanks for your code, @justafrank. I got a lot of inspiration from your code for that video.