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.
<!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.
<!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>
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.
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....
[RESOLVED] replace code with html
Reply With Quote
Bookmarks