________________________________________________________________________________________________________________________________

Browse: > > Rewritten HTML encoding tool for Blogger

Kamis, 24 Maret 2011

Rewritten HTML encoding tool for Blogger

02.04 Lyfari Art's No comments

Today I have written HTML tool for blogger. It was earlier in PHP and now it is in JavaScript. HTML encoding application written in PHP was converting converting &, ", ', <, > for posting codes online. I intended to do that in JavaScript. It can be simple as just searching each characters and replacing with html entities. But in my case I want to provide the facility of mixed encoded text converted correctly. PHP based application was doing it correctly except it replace "\" from escape characters. If the text was having "\n" then it was becoming "n". It was not the case of writing the encoding application in JavaScript. I have just written it for fun. Mistakenly I have written the new JavaScript application which translate extra characters as well into html entities. Instead of behaving like htmlspecialchars(), it behave like htmlentities(). But this cannot be a problem. Instead it should be useful. I have left the old application link on the page, so if you were using the old application and like to continue with that then you can continue. As old application, it takes care of already encoded character and do not reconvert that again. So, if you had few characters as '&' then this will not become '&amp;'. Check the new online JavaScript encoding application.
Here is JavaScript code used there:

view plaincopy to clipboardprint?
  1. <script type="text/javascript">  
  2.   
  3.     function giveMsg(msg1) {  
  4.   
  5.         document.getElementById("msgDiv").innerHTML =  msg1 ;  
  6.         document.getElementById("msgDiv").className = 'msg';  
  7.   
  8.         window.setTimeout('giveMsg("")', 5000);  
  9.   
  10.     }  
  11.   
  12.     function convertIt() {  
  13.   
  14.         var txtArea     = document.getElementById('data');  
  15.         var txtAreaVal  = txtArea.value;  
  16.   
  17.         var noquote = document.getElementById('noquotes');  
  18.         var noquoteVal = noquote.checked;  
  19.   
  20.         // do not convert single and double quotes  
  21.         if (noquoteVal) {  
  22.   
  23.             var tmpVal = html_entity_decode (txtAreaVal);  
  24.   
  25.             txtArea.value = htmlentities(tmpVal, "ENT_NOQUOTES");  
  26.   
  27.             // restore single quote. Due to a bug in php.js org htmlentities function, this is required!  
  28.             $trans = {''' : "'" };  
  29.             txtArea.value = strtr(txtArea.value, $trans);  
  30.   
  31.         }  
  32.         else { // convert single and double quotes as well  
  33.   
  34.             var tmpVal = html_entity_decode(txtAreaVal);  
  35.   
  36.             txtArea.value = htmlentities(tmpVal, "ENT_QUOTES");  
  37.   
  38.         }  
  39.   
  40.         giveMsg('Characters converted.');  
  41.     }  
  42.   
  43.     </script>  
This is not the only JavaScript I am using. For getting other then above JavaScript code, please use this URL: htmlspecialchars.js. I have taken these functions from phpjs.org, which I have mentioned earlier.
Here is the HTML code in action:
view plaincopy to clipboardprint?
  1. <!doctype html>  
  2.   
  3. <html>  
  4. <head>  
  5.     <title> Webmaster tool: Encode code before posting on blog </title>  
  6.     <meta http-equiv=Content-Type content="text/html; charset=utf-8" />   
  7.   
  8.     <meta name="keywords" content="encode, code, html, adsense, blogspot, wordpress" />  
  9.     <meta name="description" content="Code/script encoding before posting online (blog/Website). Blogspot Adsense code need to be encoded before posting inside HTML" />  
  10.   
  11.     <style>  
  12.         body {font-size:85%;margin-left:10px;}  
  13.         .big {font-size:16px;}  
  14.         h1 {margin:0px;}  
  15.         .footer {font-size:0.8em}  
  16.         .msg {font-weight:bold;color:red}  
  17.   
  18.     </style>  
  19. </head>  
  20. <body>  
  21.   
  22. <div id="msgDiv"></div>  
  23.   
  24. <form method=post action="" onsubmit="return checkForm(this);">  
  25.   
  26. <textarea id="data" name="data" rows="20" cols="120" wrap="soft"><?php echo htmlspecialchars(stripslashes($_POST['data'])); ?></textarea>  
  27.   
  28. <div style="width:800px;position:relative">  
  29.   
  30. Do not convert <b class="big">"</b> and <b class="big">'</b> characters.  
  31. <input type="checkbox" id="noquotes" name="noquotes" checked="checked">  
  32.   
  33. <div style="float:right"><input type="button" onclick="convertIt();" name="convert" value="Convert" > </div>  
  34. </div>  
  35. <br/>  
  36. It will take care of already converted characters.  
  37. </form>  
  38. </body>  
  39. </html>  
If I have missed any code and if you find any broken line then you can visit the online HTML encoding tool and check that yourself! As it is all in client side language.
Here is the post I have written when I made online encoding tool based on PHP.

Posted in:
Bookmark and Share

0 komentar:

Posting Komentar

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Dcreators