javascript - How to make a simple prettyprint <pre> with jquery - Stack Overflow

/

I am attempting to make an extremely simple prettyprint function with jQuery, but I do not know how to find elements, attributes, and values (shown in the jsfiddle).

I am trying to acplish the following:

1. Wrap elements with <span class="element" />
2. Wrap attributes with <span class="attribute" />
3. Wrap values with <span class="value" />
4. Replace < with &lt
5. Replace > with &gt

Here is the current jQuery that I have:

$(document).ready(function() {

    $('pre.prettyprint').each(function() {

        $(this).css('whitespace','pre-line');
        /* Why isnt ^this^ working? */

        var code = $(this).html();

        // How should I define the following

        var element = $(code).find(/* ELEMENTS */);
        var attribute = $(code).find(/* ATTRIBUTES */);
        var value = $(code).find(/* Values */);

        $(element).wrap('<span class="element" />');
        $(attribute).wrap('<span class="attribute" />');
        $(value).wrap('<span class="value" />');

        $(code).find('<').replaceWith('&lt');
        $(code).find('>').replaceWith('&gt');
    });
});

Which is attempting to format this:

<pre class="prettyprint">
    <a href="">Visit Website</a>
    <a href="#top">Back to Top</a>
</pre> 

into this:

<pre class="prettyprint">
    <span class="element">a <span class="attribute">href</span>=<span class="value">””</span></span>Visit Website<span class="element">/a</span>
    <br/>
    <span class="element">a <span class="attribute">href</span>=<span class="value">”#top”</span></span>Back to Top<span class="element">/a</span>
</pre>

Thank you ahead of time!

You can see the jsfiddle here: /

http://jsfiddle/JamesKyle/L4b8b/

I am attempting to make an extremely simple prettyprint function with jQuery, but I do not know how to find elements, attributes, and values (shown in the jsfiddle).

I am trying to acplish the following:

1. Wrap elements with <span class="element" />
2. Wrap attributes with <span class="attribute" />
3. Wrap values with <span class="value" />
4. Replace < with &lt
5. Replace > with &gt

Here is the current jQuery that I have:

$(document).ready(function() {

    $('pre.prettyprint').each(function() {

        $(this).css('whitespace','pre-line');
        /* Why isnt ^this^ working? */

        var code = $(this).html();

        // How should I define the following

        var element = $(code).find(/* ELEMENTS */);
        var attribute = $(code).find(/* ATTRIBUTES */);
        var value = $(code).find(/* Values */);

        $(element).wrap('<span class="element" />');
        $(attribute).wrap('<span class="attribute" />');
        $(value).wrap('<span class="value" />');

        $(code).find('<').replaceWith('&lt');
        $(code).find('>').replaceWith('&gt');
    });
});

Which is attempting to format this:

<pre class="prettyprint">
    <a href="http://website.">Visit Website</a>
    <a href="#top">Back to Top</a>
</pre> 

into this:

<pre class="prettyprint">
    <span class="element">a <span class="attribute">href</span>=<span class="value">”http://website.”</span></span>Visit Website<span class="element">/a</span>
    <br/>
    <span class="element">a <span class="attribute">href</span>=<span class="value">”#top”</span></span>Back to Top<span class="element">/a</span>
</pre>

Thank you ahead of time!

You can see the jsfiddle here: http://jsfiddle/JamesKyle/L4b8b/

• javascript
• jquery
• html
• pretty-print
• pre

Share Improve this question Follow edited Jan 29, 2020 at 10:11 Vadim Kotov 8,28488 gold badges5050 silver badges6363 bronze badges asked Dec 1, 2011 at 3:26 James KyleJames Kyle 4,17844 gold badges2929 silver badges4242 bronze badges 5

• This isn't really simple ;) – Blender Commented Dec 1, 2011 at 3:30
• pared to what instructions I've seen it is haha – James Kyle Commented Dec 1, 2011 at 3:30
• 3 Shouldn't whitespace be white-space? – Jay Gilford Commented Dec 1, 2011 at 3:34
• @JayGilford OMG THANK YOOU, I was staring at it like wth am I missing? – James Kyle Commented Dec 1, 2011 at 3:36
• hehe easy to miss :) pure chance I spotted it – Jay Gilford Commented Dec 1, 2011 at 3:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

The real magic would e in handling a tag of arbitrary properties. Here's the simple "anchor" version: jsFiddle

$('pre.prettyprint').each(function() {
    $('a').each(function(){
        $anchor = $(this);
        html = '<span class="element">&lt;a ';
        html += '<span class="attribute">href</span>=<span class="value">"' + $anchor.attr('href') + '"&gt;</span>';
        html += '</span>' + $anchor.text() + '<span class="element">&lt;/a&gt;</span>'
        $anchor.replaceWith(html);
    });
});

I don't know how to do it with jQuery and nobody else does either, because its not as simple as you are making it out to be. Fortunately for you somebody has already written a badass pretty-print solution in JavaScript for markup:

http://prettydiff./markup_beauty.js

As far as I know it is the most plete pretty-print algorithm for markup languages ever written.

To be honest, you're not going to be able to wrap the elements and attributes like you want using the .find() - The easiest way to achieve what you are wanting is to use regular expression(s) to figure out what needs wrapping, and applying it. Of course, that's a lot easier said than done