How to achieve (auto) code format selection of any html code via jQuery / C# ? (Any solution)

Question

Our application can share code. For example user is sharing the html code as follows

<div id="nav-vert-one">

<ul>
{{for GroupCollection}}
<li>
 <a href="#" title="{{:Name}}" onclick="test()">      {{:Name}}</a>
('{{:GroupId}}')">

</li>
{{/for}}
</ul>

which is not in a perfect format .... Now i need to achieve the (auto) code formatting ...

i.e. after auto code format click, it should look like

<div id="nav-vert-one">
    <ul>
        {{for GroupCollection}}
        <li><a href="#" title="{{:Name}}" onclick="test()"> {{:Name}}</a>
('{{:GroupId}}')"></li>
        {{/for}}
    </ul>

So, is there ready made plugin available or is there any way(s) to achieve it either via jQuery or C#?

Answer 1

There is a jQuery plugin called jquery-htmlClean: http://code.google.com/p/jquery-clean/

I tried it with your code sample, this is the output:

<div>
    <ul>
        {{for GroupCollection}}
        <li>
            <a href="#" title="{{:Name}}">{{:Name}}</a> ('{{:GroupId}}')">
        </li> {{/for}}
    </ul>
</div>

You can try it here: http://www.antix.co.uk/Content/Demos/jQuery-htmlClean/Test.htm