html2text

by djp3d

HTML

<h1>Html to Text Conversion</h1>
<div id="html">
   

<div style='mso-element:frame;mso-element-frame-hspace:9.0pt;mso-element-wrap:
around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
column;mso-element-top:.05pt;mso-height-rule:exactly'>

<table cellspacing=0 cellpadding=0 hspace=0 vspace=0 align=left>
 <tr>
  <td valign=top align=left style='padding-top:0cm;padding-right:9.0pt;
  padding-bottom:0cm;padding-left:9.0pt'>
  <p class=MsoListParagraphCxSpFirst style='text-indent:-18.0pt;mso-list:l0 level1 lfo1;
  mso-element:frame;mso-element-frame-hspace:9.0pt;mso-element-wrap:around;
  mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:column;
  mso-element-top:.05pt;mso-height-rule:exactly'><![if !supportLists]><span
  style='font-size:8.0pt;line-height:107%;font-family:Symbol;mso-fareast-font-family:
  Symbol;mso-bidi-font-family:Symbol;color:black;mso-themecolor:text1'><span
  style='mso-list:Ignore'>·<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  </span></span></span><![endif]><span style='font-size:8.0pt;line-height:107%;
  font-family:"Arial",sans-serif;color:black;mso-themecolor:text1'>Curriculum
  is broad and accessible to all pupils – there is no narrowing for all or some
  pupils<o:p></o:p></span></p>
  <p class=MsoListParagraphCxSpMiddle style='text-indent:-18.0pt;mso-list:l0 level1 lfo1;
  mso-element:frame;mso-element-frame-hspace:9.0pt;mso-element-wrap:around;
  mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:column;
  mso-element-top:.05pt;mso-height-rule:exactly'><![if !supportLists]><span
  style='font-size:8.0pt;line-height:107%;font-family:Symbol;mso-fareast-font-family:
  Symbol;mso-bidi-font-family:Symbol;color:black;mso-themecolor:text1'><span
  style='mso-list:Ignore'>·<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  </span></span></span><![endif]><span style='font-size:8.0pt;line-height:107%;
 ...

CSS

div {
    padding: 20px;
    margin: 20px;
    border: 1px solid grey;
    font-family: verdana;
    font-size: 10px;
}

JavaScript

$( function(){

    var $htmlEl = $( '#html' );
    var $textEl = $( '#text' );
    var html = $htmlEl.html();
    
    var text = html2Text( html );
    
    $( '#textarea' ).val( text );
    
    text = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');

    
    $textEl.html( text );
    
    
    // convert back to html for display purposes
    $textEl.html( text );
});

/**
 * Convert HTML code to plain text.
 *
 * This function converts the html into plain text that is usable for marketing purposes,
 * so it supports things like bullet points and numbering.  It also supports a "hide-text" class,
 * which you can use to hide elements from the plain text version.
 */
function html2Text( html )
{
    var tagRegexp;
    
    // the following tags will be removed, but their contents will be maintained
    var tags_unwrap = [ 'a', 'b', 'span', 'i', 'em', 'u', 'strong', 'sup', 'center', 'font' ];
    
    // the following tags will be stripped, as well as their contents
    var tags_strip  = [ 'iframe', 'img', 'script', 'style', 'link', 'object', 'embed', 'table' ];
    
    // the following tags will include white space below
    var tags_block_level = [ 'p', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ];
    
    for( var i in tags_block_level )
    {
        tagRegexp = new RegExp( '\s+(\<'+tags_block_level[i]+'\>)' );
        html = html.replace( tagRegexp, '$1' );
    }
  
    // strip excess white space
    html = html.replace( /(\r\n|\r|\n)\s+/g, '\n' );
    
    tagRegexp = new RegExp( '\s*(<\/('+tags_block_level.concat(['div']).join('|')+')\s*>)\s+', 'gi' );
    html = html.replace( tagRegexp, '$1' );
    
    tagRegexp = new RegExp( '\s*(<('+tags_block_level.concat(['div']).join('|')+')(\s+[^>]+){0,1}>)\s+', 'gi' );
    html = html.replace( tagRegexp, '$1' );
    
    html = html.replace( /(\r\n|\r|\n)/g, '' );
    html = html.replace( /\s+/g, ' ' );
    
    // wrap in a div to allow modification
   ...