Inner html copy and generate code using simple javascript technique


The inner html of below div will be copied to textarea as like generated code


   <div id="inner_content_to_copy">
     <h1>This is header</h1>
     <p>This is paragraph</p>
     <button>Click Me</button>
   </div>

javascript code to manage this functionality:


   <script type="text/javascript">
     var content = document.getElementById("inner_content_to_copy").innerHTML;
     content = content.replace(/</gi, "&lt;");
     content = content.replace(/>/gi, "&gt;");
     content = content.replace(/[\r\n]+/g, " ");
     content = content.replace(/\s+/g," ");
     content = content.replace(/\s\&lt\;\//g,"&lt;/");
     document.getElementById('show_content_for_export').innerHTML = content;
   </script>

Code will be displayed here:


 <textarea id="show_content_for_export" class="preview_div" name="preview_div"></textarea>

Advertisements

One response to “Inner html copy and generate code using simple javascript technique

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s