How to strip a page of inline formatting and make it external?

I am trying to convert a website that uses a lot of old-school in-page formatting to the standard way of doing things where the content is on the html page and the styling is in the css document. Also, the page is in Japanese.

Here is the translated page.

Are there any batch operations or tools I can use to strip the page of all its messy inline formatting without selecting any of the Japanese characters (even with Google Translate after selecting the page the translated Japanese characters are still copied) and still maintain a word wrap? Basically, I want to make the coding and design of the page up to date and I need to do it on a开发者_运维问答 lot of pages so I'll need some sort of batch operation.

Any ideas/advice? Thanks.

Hi you can use jquery to help. i've given you a starting point on jsfiddle.

jQuery:

$(document).ready(function() {

  css = '';

  $('body *').each(function(){
    if (!!$(this).attr('style')){
      if(!!$(this).attr('class')){
        css += '.'+$(this).attr('class')+'{'+$(this).attr('style')+'}<br />';
      };
      if(!!$(this).attr('id')){
        css += '#'+$(this).attr('id')+'{'+$(this).attr('style')+'}<br />';
      };
    }
  });

  $('#css').html(css);

});

This is by no means a finished solution, but it should definatly give you a helping start

Also whn you're happy that you got all the styles collected, you can use $(this).removeAttr('style') to remove the style attribute from the elements.