search

ykdojo / editdojo

(I'm no longer working on this - currently working on https://github.com/ykdojo/defaang)
https://www.csdojo.io/edit
MIT License
332 stars 98 forks source link

Find the difference between two sets of text with JavaScript #22

Closed ykdojo closed 5 years ago

ykdojo commented 5 years ago

Example:

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)

haruntuncay commented 5 years ago

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.

ykdojo commented 5 years ago

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 :)

ykdojo commented 5 years ago

Found this library, but not sure if it would be a good fit for this: https://github.com/jhchen/fast-diff

ykdojo commented 5 years ago

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.

ykdojo commented 5 years ago

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

franktzheng commented 5 years ago

Hey @ykdojo did you look at my pull request (https://github.com/ykdojo/editdojo/pull/25)?

ykdojo commented 5 years ago

@JustaFrank hey sorry I thought I'd submitted my comments already. I just sent them again.

ykdojo commented 5 years ago

I was thinking of implementing something on my own and comparing it to yours.

ykdojo commented 5 years ago

Here are some examples for testing, in English:

ykdojo commented 5 years ago

And some test cases in Japanese:

ykdojo commented 5 years ago

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.

franktzheng commented 5 years ago

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.

textdif

Should I submit another pull request?

ykdojo commented 5 years ago

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 :)

ykdojo commented 5 years ago

Solved this in my last video. I'll close this issue for now. https://youtu.be/4SP_AY7GGxw

ykdojo commented 5 years ago

Also thanks for your code, @JustaFrank. I got a lot of inspiration from your code for that video.