Change the color of lines of text box lines using javascript

[tsisher]

Is it possible to do this ?

Let me explain this.
// aspx
<asp:TextBox runat="server" ID="txtOld" TextMode="MultiLine" Columns="70" Rows="30" Width="425px" />
<asp:TextBox runat="server" ID="txtNew" TextMode="MultiLine" Columns="70" Rows="30" Width="425px" />
<asp:Button Text="Compare" runat="server" ID="btnCompare" OnClick="btnCompare_Click" />

// c#
I have two string

string strOld = "This a line 1\nThis is going to be line 2\rThis is going to be line 3\rThis is line 4";
string strNew = "This a line 1\nThis text is changed here going to be line 2\rThis is going to be line 3\rThis is changed line 4";

Please note that these strings have \n and \r in it.

When form loads, I do something like this
if (!IsPostBack)
{
txtOld.Text = strOld;
txtNew.Text = strNew;
}
Web browser automatically splits the strings and align nicely in the Text box like this

txtOld TextBox renders like this

This a line 1
This is going to be line 2
This is going to be line 3
This is line 4

txtNew TextBox renders like this

This a line 1
This text is changed here going to be line 2
This is going to be line 3
This is changed line 4

Now when hit compare button, I need to mark the lines and change the color of the lines in the text box which are different,

for example
Line 2 and line 4 in the above example.
I may be able to compare the strings but how do I mark and change color of the lines in the text box.
Please advice.

Someone replied in other post that its good idea to do this at client side using javascript.
Is it possible do that in javascrit and change the color of the lines of TextBox

Thanks

 

[feherke]

Hi

Please note that not everybody knows ASP, so not everybody knows in what HTML tag will be [tt]asp:TextBox[/tt] rendered. My personal guess is [tt]textarea[/tt], in which case coloring is not possible.

Regarding the diff part, comparing lines is trivial, but comparing groups of lines is complicated. So if you are interested only in changed lines, it is simple. If you are interested in added, deleted, joined, split, moved lines, I suggest to forget implementing it yourself.

With that, we arrived to the client vs server side problem. There are libraries for checking differences. On the server side you could probably use a C# library. That should be easier to code, faster to run and smaller to download. Additionally, you could cache the ( description of ) differences on the server, so not check for differences every time it is displayed.


Feherke.

http://free.rootshell.be/~feherke/

 

[vacunita]

As Feherke points out, please post the rendered HTML and not the server side code.

Now assuming your text is display in a <textarea> The short answer is you can't color code the text lines. Because textareas don't support text coloring.

You would have to use a div, and spans around the lines instead or if you want to keep it editable, a rich text editor of which there are many online you can use.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/