Home Page

  • September 28, 2023, 03:00:33 AM *
  • Welcome, Guest
Please login or register.

Login with username, password and session length
Advanced search  


Official site launch very soon, hurrah!

Post reply

Warning: this topic has not been posted in for at least 120 days.
Unless you're sure you want to reply, please consider starting a new topic.
Message icon:

Type the letters shown in the picture Type the letters shown in the picture Type the letters shown in the picture Type the letters shown in the picture Type the letters shown in the picture Type the letters shown in the picture
Listen to the letters / Request another image

Type the letters shown in the picture:
Sorry, but I've had to disable commenting at this time. There has only been spam for a while.:

shortcuts: hit alt+s to submit/post or alt+p to preview

Topic Summary

Posted by: Dakusan
« on: October 11, 2014, 01:55:43 AM »

Original post for Format Text [to HTML] Script can be found at https://www.castledragmire.com/Posts/Format_Text_[to_HTML]_Script.
Originally posted on: 10/11/14

After writing the documentation in plaintext format for DSQL just now, I needed to convert it into HTML for the project’s page. I’ve done this before manually and it’s always very daunting, so I decided to really quickly write a script to do most of the work for me, which can be downloaded here, or the code seen below.

It has the following:
  • Input text box with HTML data that is instantly shown as HTML in a below section when modified.
    Both sections take up half the vertical screen space
  • Undo/redo buffer for the text box (very primitive functionality)
  • “Open in new page” button, which opens a new window with just the HTML data (useful for validation [W3C or whatnot]).
    This is disabled by default because it is a dangerous option (XSS exploitable, so the script would need to be secured/password protected if this was on)
  • “Escape HTML” escapes HTML characters so they are not improperly interpreted (e.x. “<” becomes “&lt;”)
  • Listize:
    • Turns tabbed lists into HTML
    • For example:
      would become:
      • 2
      • 3
        • 4

I realized while making the script that I should probably instead just start making my documentation in a markup (like GitHub’s) and then have that converted to HTML and text files. Oh well.


<? header('Content-Type: text/html; charset=utf-8'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title>Format Text</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
$AllowRenderText=true; //Set to true only if this is in a secure environment, as directly outputting a given value can lead to XSS
   return print '</head><body>'.($AllowRenderText ? $_REQUEST['RenderText'] : 'Rendering of text not allowed').'</body></html>';
<style type="text/css">
html, body { width:100%; height:100%; margin:0; padding:0; }
.HalfScreen { display:block; width:calc(100% - 2px); height:calc(50% - 2px - 30px/2); margin:0; border:1px solid black; }
#RenderForm { overflow:hidden; }
#RenderText { margin:0; border:0; width:100%; height:100%; }
#RenderHTML { overflow-x:hidden; overflow-y:scroll; }
.TopBar { height:30px; background-color:grey; }
.Hide { position:absolute; visibility:hidden; top:-10000px; }

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">$(document).ready(function() {

//History for undoing
var UndoBuf=[], RedoBuf=[];
function Undo()
function Redo()
$('#Undo').click(function(e) { e.preventDefault(); Undo(); });
$('#Redo').click(function(e) { e.preventDefault(); Redo(); });

//Render HTML
function Render() {
   //Do the render
   var MyVal=$('#RenderText').val();

   //Save current value to the history
   //*Better history functionality here would be real nice (using smart currentTarget.selectionStart/End calculations), along with an undo/redo button, but not within the scope of this project
   if(RedoBuf.length) //Empty redo buffer
   if(UndoBuf.length>100) //Limit history buffer
$('#RenderText').on('keypress paste', function(e) { setTimeout(Render, 1); }); //Automatic update on paste requires a timeout

//Open in new page
$('#OpenInNewPage').click(function(e) {

//Escape HTML
$('#EscapeHTML').click(function(e) {
   $('#RenderText').val(function(index, value) {
      $.each({"&amp;":/&/g, "&lt;":/</g, "&gt;":/>/g, "&quot;":/"/g, "&#039;":/'/g}, function(HTMLStr, ReplStr) {
         value=value.replace(ReplStr, HTMLStr); });
      return value;

//Listize based on tabbing
//If a successive line is tabbed over beyond the current, it is made inside a new nested list.
//Tabbing over more than once on a successive line will create multiple nests
//Having @@@ at the beginning of a line will include it in the previous line item, no matter the tabbing
//Make sure to have @@@ blank lines tabbed over to the proper nested level
$('#Listize').click(function(e) {
   //Get the text to replace
   var T=$('#RenderText').val();

   //Go over each line and if the next line is tabbed beyond it, make it a new nested list. Blank
   var CurTabLevel=0, NewLines=[]; //NewLines is 2 items per line: the original string and the new html tags
   $.each(T.split(/\r?\n/), function(Index, Str) {
      //Check for a continued line item
      if(Str.substr(0, 3)=='@@@')
         return NewLines.push('
', Str.substr(3));

      //In/de-dent as needed
      var Tags='';
      var NewTabLevel=/^\t*/.exec(Str)[0].length, PreLevel=CurTabLevel; //Get the nested level

      //Fill out the rest of the line
      if(NewTabLevel==0) //Breaks between top level new lines
         Tags+=(Index && PreLevel==0 ? '
' : '');
      else if(PreLevel>=NewTabLevel) //If previous item needs to be ended (new level is not greater and not 0)

      NewLines.push(Tags, Str);

   //Finish de-dent as needed
   var Final=[NewLines.shift()];
   var EndLine='';

   //Combine each line with the tags
   for(var i=0;i<NewLines.length;i+=2)

   //Update from the replaced text


   <div class=TopBar>
      <input type=button id=EscapeHTML value="Escape HTML">
      <input type=button id=Listize value="Listize">
      <? if($AllowRenderText) { ?> <input type=button id=OpenInNewPage value="Open In New Page"> <? } ?>
      <input type=button id=Undo value="Undo">
      <input type=button id=Redo value="Redo">
   <form action="FormatText.php" method=post id=RenderForm target="_blank" class=HalfScreen>
      <textarea id=RenderText name=RenderText></textarea>
      <input type=submit class=Hide>
   <div id=RenderHTML class=HalfScreen></div>