I'm trying to handmake an instant preview function for my project and thus replace BBCode with HTML in the preview. However, there's this BBCode tag that allows users to paste raw html into it and keep it that way. I don't know how to put raw html inside .html() and keep the rest intact and with formatting.
By raw html, I mean that <strong>info</strong> would render <strong>info</strong> in the preview aswell, i.e if wrapped by <rawcode></rawcode>
I'm using a free shared-host forum, so I don't have access to db and can't add any api/plugin either.
HTML
<textarea name="" id="textareainput" cols="30" rows="10">
[b]bold[/b] bold <strong>hi</strong> <em>i</em>
</textarea>
<p id="posttextareadisplay"></p>
jQuery
$('.preview').html( $('#textareainput').val() );
var bbcodeh = $('.preview').html().
replace(/(\[((\/?)(b|u|i|s|sub|sup))\])/gi, '<$2>');
$('.preview').html(bbcodeh);
Couldn't try anything as I couldn't find anything fitting this particular case. I was thinking about mixing .text() and .html() but dunno how.
EDIT: Current progress; could replace the [code][/code] tags with something else but can't make it appear "raw" (with the tags shown); Updated JSFiddle
EDIT(2): Tried things, thought I was getting close: i'm not. Updated JSFiddle
EDIT(3): I successfully got to keep the tags.. but the result is only working for the first instance. I don't know how to make it work if there are multiple [code][/code] instances. Updated JSFiddle
-
Latest update
I don't know if i'm getting closer or not, but I'm still stuck. I'd really use some help. Updated JsFiddle