0

I am developing an app that the user send text to the server. Then the server change the text, and respond with the original text and the modified text.

How to represent text that deleted in JSON. (strike-through)

For example like so:

enter image description here

I thought about something like that:

Array that contain all the text, splited to where to contain stroke, and where not:

 data={
   textBefore:'this is the first world. this is the second world',
   textAfter:'this is first world. this is second world,
  changes:[
    {'nostroke':'this is th'},
    {'stroe':'efirst world'},
    {'nostroke':'in the third world'}
  ]
}

Do you have any better idea?

Or like this:

data={
  textBefore:'this is the first world. this is the second world',
  textAfter:'this is first world. this is second world,
  changes:[
    {from:2,to:22,text:'repace from char 2 to char 22 with this text'},
    {from:2,to:4} // This will only delete 2 chars
    {from:2,to:2,text:'This will only append this text without replae},
  ]
Aminadav Glickshtein
  • 23,232
  • 12
  • 77
  • 117

4 Answers4

1

I have checked how google-diff-match-patch represent it in an array, and this is the result. Diff between original text and original txet:

var x=new diff_match_patch().diff_main('original text','original txet')
JSON.stringify(x)
//Result
"[[0,"original t"],[-1,"e"],[0,"x"],[1,"e"],[0,"t"]]"

Explain:

  • 0 Two texts have this (the same)
  • -1 only in the first text (deleted)
  • 1 only in the second text (addition)

Source code:

https://code.google.com/archive/p/google-diff-match-patch/wikis/API.wiki

Demo:

https://neil.fraser.name/software/diff_match_patch/svn/trunk/demos/demo_diff.html

Thank to @Andriy for the links

Aminadav Glickshtein
  • 23,232
  • 12
  • 77
  • 117
0

You could use the <strike></strike> html tag in your server's response (supposing you replace the word duper by awesome):

{
    "old":"My super duper text",
    "new":"My super <strike>duper</strike> awesome text"
}

Then you'll have to interpret it has html in your client code.

cl3m
  • 2,791
  • 19
  • 21
0

You have to find removed text on frontend in AJAX success handler (I assume you send XMLHttpRequests) or on backend (after forming new and old text strings, but before creating JSON Response) by wrapping removed words into strike tag.

Find differences between start and end sting could be quite complex. However i recommend you checkout existed SO Questions:

Also if you are able to give some idea of how backend works with strings submitted to might be that would be easier to perform such logic by server...

Community
  • 1
  • 1
Andriy Ivaneyko
  • 20,639
  • 6
  • 60
  • 82
0

You could build your own sheme as you want...

Could be:

message: {
    text: 'Then the server change the text',
    strikeAt: 16,
    strikeLen: 6,
    otherFunProperty: 'yNot'
}

or even better:

message: {
    text: 'Then the server change the text',
    strikes: [ [ 16, 6 ] ],
    bolds: [],
    otherFunProperty: 'yNot'
}

But it's just one way...

Maybe not the more appropriated to your specific case.

If you have to store some kind of history, you could have a look at diff -u shell command (used for patch command):

--- stringBefore    2016-02-15 11:49:04.493941099 +0100
+++ stringAfter
@@ -16,0 +17,3 @@
+<s>
@@ -22,0 +26,4 @@
+</s>
F. Hauri - Give Up GitHub
  • 64,122
  • 17
  • 116
  • 137