How to remove prettyprint classes from my code

Question

I have a jquery variable which holds html code with google's pretty-print classes to stylize the code.

<span class="pln">
  echo </span>
  <span class="str">"$output"</span>
<span class="pun">;</span>
<span class="pln">
    echo </span>
<span class="str">"$my_code"</span>
<span class="pun">;</span>

I wish to remove those pretty-print classes. The output should look like this

echo $output;
echo $my_code;

I also wish to keep those line breaks and code formatting.

I tried to remove each span elements using jquery but its a tedious task. Is there a way to do it in a more productive manner.

Answer 1

Here is a possible solution, assuming all the code is inside a div with specific class, and you want to replace the content, of course you can change these aspects easily:

// change to fit your case
var parent = $('.your-own-class');

var html = parent.html();
html = html
    .replace(/(\r\n|\n|\r)/g,'')
    .replace(/(\s\s+?)/gm, '')
    .replace(/(\s+?\<+?)/gm, '<');

var tempElement = $("<pre />").html(html);
tempElement.find(".pln:not(:first)").prepend("\n");
var text = tempElement.text();

// change to fit your case
var output = parent;

output.text(text).css("white-space", "pre");

Working demo:

http://jsfiddle.net/Meligy/Ym2M8/

Please note the code is not optimized for best performance, if your real world prettyprint code is rendered differently from the exact code you have here, you can save some Regex parses and get better performance.