Dushyant Patel’s Blog

Remove HREF attribute using Regular Expression & jQuery

Requirement is to get the content of the specific DIV remove HREF attributes from all and assign new content (without HREF attributes) to printer friendly page.

For Demo : onClick of button storing content of <DIV class=”content1″>. Using Regular Expression removing HREF and then assign that content to <DIV class=”content2″>.

HTML Code:

<div class="content1">
<a href="javascript:testfunction(4933)">This is test link 1</a>
<p>This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. </p> <a href="test2.html">This is test link 2</a> <p>This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. </p> <a href="test2.html">This is test link 3</a> <p>This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. </p> <a href="test3.html">This is test link 4</a> <p>This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. </p> </div> <div> <input name="testbtn" id="testbtn" type="button" value="Remove" /> </div> <div class="content2"></div>

CSS Code:

<style type="text/css">
body {
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:11px;
 }
.content1, .content2 {
   width:400px;
   margin:10px;
   background-color:#efefef;
   border:1px solid #ccc;
   float:left;
   padding:10px;
}
.content2 {
   float:right
}
.btndiv {
   width:100px;
   float:left;
}
</style>

jQuery Code:

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {

  $("input#testbtn").click(function () {
     var printcontent = $("div.content1").html();
     printcontent = printcontent.replace(/\s*href\s*=\s*('[^']*'|"[^"]*")/ig,'');
     $("div.content2").html(printcontent);
  });
});

</script>
Advertisements

Filed under: Technology

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: