www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] replace code with html

  1. #1
    Join Date
    Mar 2008
    Location
    North Wales - UK
    Posts
    7

    resolved [RESOLVED] replace code with html

    Hello,
    I am having problems figuring out what to do for best.

    I have a website which requires HTML formatting to display product listings correctly but i have to be able to export the listing to an external site which uses its own set of formatting tags.

    My idea was to create 2 textarea fields and use this function to copy the contents into the second textarea as its typed into the first.
    Code:
    function CopyValue(obj1, obj2)
      {
         var visibleField = obj1;
         obj2.value = visibleField.value;
     
      }
    What i then want it to have a convert button which will replace certain words with html code i.e
    HTML Code:
    [blue] would be replaced with <span class="color:blue">
    
    and [/blue] would be replaced with </span>
    etc...

    I am unsure if there is something out there which can do this for me but i'm hoping there is a way i can do it.

    Thanks in advance!
    Will.

  2. #2
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    Somewhat ugly, but this may work for you:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
    <title></title> 
    <script type="text/javascript">
    
    function colorRepl(tStr, objId){
    	var tObj=document.getElementById(objId).value;
    	var str="/\\\["+tStr+"\\\]/gi"; 
    	tObj=tObj.replace(eval(str),"<span style='color:"+tStr+"'>");
    	str="/\\\[\\/"+tStr+"\\\]/gi";
    	tObj=tObj.replace(eval(str),"</span>");
    	document.getElementById("tOut").value=tObj;
    }
    
    </script>
    
    </head> 
    <body>
    <button onclick="colorRepl('blue', 'fFld');">Format</button><br>
    
    <textarea style="width:50%;height:300px" id="fFld">
    Some[blue] random text [/blue]that I want to format.
    
    Format some [blue]more[/blue]...
    
    random text and so on....
    </textarea>
    <textarea style="width:50%;height:300px" id="tOut"></textarea>
    </body> 
    </html>
    Last edited by TheBearMay; 03-05-2008 at 02:06 PM.
    54 68 65 42 65 61 72 4D 61 79

  3. #3
    Join Date
    Mar 2008
    Location
    North Wales - UK
    Posts
    7
    That is brilliant! No wonder i couldn't figure it out!

    One more question - is it simple enough to add extra items to change?
    The full list i want to convert is;

    Code:
     --> <strong>
     --> </strong>
    [red] --> <span style='color:red'>
    [/red] --> </span>
    [blue] --> <span style='color:blue'>
    [/blue] --> </span>
    [green] --> <span style='color:green'>
    [/green] --> </span>
    - ok, noticed the post removed the first [ b ] and [ / b ]
    Thank you again in advance!

    Will.
    Last edited by beastiewebdev; 03-05-2008 at 02:16 PM.

  4. #4
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    Just need to rearrange things a wee bit:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
    <title></title> 
    <script type="text/javascript">
    
    function colorRepl(tStr, tObj){
    	var str="/\\\["+tStr+"\\\]/gi"; // /\[blue\]/gi
    	tObj=tObj.replace(eval(str),"<span style='color:"+tStr+"'>");
    	str="/\\\[\\/"+tStr+"\\\]/gi";
    	tObj=tObj.replace(eval(str),"</span>");
    	return tObj
    
    }
    
    function tagRepl(objId) {
    	var tObj=document.getElementById(objId).value;
    	tObj=colorRepl("blue",tObj);
    	tObj=colorRepl("red", tObj);
    	tObj=colorRepl("green", tObj);
    	tObj=tObj.replace(/\[b\]/gi, "<span style='font-weight:bold'>");
    	tObj=tObj.replace(/\[\/b\]/gi, "</span>");
    	document.getElementById("tOut").value=tObj;
    }
    
    </script>
    
    </head> 
    <body>
    <button onclick="tagRepl('fFld');">Format</button><br>
    
    <textarea style="width:50%;height:300px" id="fFld">
    Some[blue] [b]random text[/b] [/blue]that I want to format.
    
    Format Some [red]more[/red]...
    
    random text[green] and so on[/green]....
    </textarea>
    <textarea style="width:50%;height:300px" id="tOut"></textarea>
    </body> 
    </html>
    54 68 65 42 65 61 72 4D 61 79

  5. #5
    Join Date
    Mar 2008
    Location
    North Wales - UK
    Posts
    7
    Thank you - I really appreciate your help!

    That worked 100%

  6. #6
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    259
    I tried to make it more universal (I dont know how great the coding is but it works for me ) Works for both standard colors and hex!.

    HTML Code:
    <script>
    function pax(string){
    var txt = string.split("[");
    if (txt.length > 1){
    var color = txt[1].search('color');
    if(color != -1){
    var numo = txt[1].substring(txt[1].indexOf("[color:")+7, txt[1].indexOf("]"));
    var res = string.replace("[color:"+numo+"]","<span style='color:"+numo+"'>");
    var rev = res.replace("[/color]","</span>");
    document.getElementById("display").innerHTML = rev;
    pax(rev); }
    else{
    	alert("Format coloring with [color:color|hex] [/color]");}
    }}
    
    //[color:gold] This [/color] is [color:red] great! [/color]
    
    </script>
    <body>
    <textarea name="textarea" id="fruit" onchange="pax(document.getElementById('fruit').value)"></textarea>
    <div id="display"> </div>
    The only limitation to create something is your own imagination.
    1010011011010000110000101101101011100000110100101100101

  7. #7
    Join Date
    Mar 2008
    Location
    North Wales - UK
    Posts
    7
    Hey, Thanks! I really appreciate your input!

    I have hit another wall....

    Long story short - i'm modifying an osCommerce store to be used for a leasing company. The XML export was created to extract the product info into a format readable by an external company who will be listing the models from the feed. osCommerce uses HTML to display the listings & the other company only supports basic BBcode.

    I was planning to use this solution to duplicate the text into a second box (hidden) & create an onblur event to convert the second box into HTML which would be used by osCommerce and the first box containing just BBcode would be exported in the XML report....

    Does this make sense?

    Kind regards,
    Will.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles