BBCode to HTML function help

rjoseph244510 · May 24, 2016, 10:33am

Hi guys

I’m currently working on a function that will convert BBCode into HTML tags.

It almost works perfectly but for some reason it’s unable to handle nested tags (ie tags within another set of tags).

For example, I submit the following BBCode:

[center][b][u][color=#ff3333][i]Here is my description[/i][/color][/u][/b][/center]

but the output on my page is:

<center>[color=#ff3333]Here is my description[/color]</center>

It just can’t handle the [color=#ff3333] tags being nested within other tags.

My code can be seen below

Is there any way of rectifying this issue? I have been on this for about 5 days now and just can’t figure it out. Any help would be much appreciated

Best regards

Rod from the UK

    <%

    '----------------------------------------
    ' Common Regular Expression Function
    '----------------------------------------
    Function ReplaceRegExp(strString, strPattern, strReplace)

    	Dim RE: Set RE = New RegExp

	With RE
		.Pattern = strPattern
		.Global = True
		ReplaceRegExp = .Replace(strString, strReplace)
	End With
	
End Function

'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

'----------------------------------------
' Turn BBcode into HTML
'----------------------------------------
Function BBCodeToHTML(strString)
	strString = ReplaceRegExp(strString, "(http|ftp|https)(:\/\/[\w\-_]+)((\.[\w\-_]+)+)([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?", "<a href=""$1$2$3$5"" target=""_blank"">$1$2$3$5</a>")
	strString = ReplaceRegExp(strString, "\[color=([^\]]*)\]([^\[]*)\[/color\]", "<span style=""color: $1;"">$2</span>")
	strString = ReplaceRegExp(strString, "\[size=([^\]]*)\]([^\[]*)\[/size\]", "<font size=""$1"">$2</font>")
	strString = ReplaceRegExp(strString, "\[font=([^\]]*)\]([^\[]*)\[/font\]", "<span style=""font-family: $1, Sans-Serif, Serif;"">$2</span>")
	strString = ReplaceRegExp(strString, "\[quote=([^\]]*)\]([^\[]*)\[/quote\]", "<div class=""quote""><span style=""font-weight: bold; font-size: 8pt;"">$1 said:</span><pre class=""quote1"">$2</pre></div>")

	strString = Replace(strString, "[b]", "<span style=""font-weight: bold;"">")
	strString = Replace(strString, "[B]", "<span style=""font-weight: bold;"">")
	strString = Replace(strString, "[u]", "<span style=""text-decoration: underline;"">")
	strString = Replace(strString, "[U]", "<span style=""text-decoration: underline;"">")
	strString = Replace(strString, "[i]", "<span style="" font-style: italic;"">")
	strString = Replace(strString, "[I]", "<span style="" font-style: italic;"">")
	strString = Replace(strString, "[/b]", "</span>")
	strString = Replace(strString, "[/B]", "</span>")
	strString = Replace(strString, "[/u]", "</span>")
	strString = Replace(strString, "[/U]", "</span>")
	strString = Replace(strString, "[/i]", "</span>")
	strString = Replace(strString, "[/I]", "</span>")

	strString = Replace(strString, "[li]", "<li>")
	strString = Replace(strString, "[/li]", "</li>")

	strString = Replace(strString, "[ol]", "<ol>")
	strString = Replace(strString, "[/ol]", "</ol>")

	strString = Replace(strString, "[ul]", "<ul>")
	strString = Replace(strString, "[/ul]", "</ul>")

	strString = Replace(strString, "[center]", "<center>")
	strString = Replace(strString, "[/center]", "</center>")

	BBCodeToHTML = strString
End Function

'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

strTest = "[center][b][u][color=#ff3333][i]Here is my description[/i][/color][/u][/b][/center]"

description = BBCodeToHTML(strTest)

%>

<%=description%>

ParkinT · May 24, 2016, 11:51am

I do not think BBCode was ever intended to support nested tags. To my recollection that was not an option on any site that supports BBCode.

Mittineague · May 24, 2016, 2:43pm

Maybe not intended, but experimentation has shown that it sometimes does at least.

[color=blue][u]styled like a link[/u][/color]

styled like a link

ronpat · May 24, 2016, 3:30pm

Whether BBCode is intended to support nested tags of not seems irrelevent. Given predictable strings (in this case, BBCode strings), why doesn’t the OP’s code turn them into HTML styles? Seems like one of the regex’s might not be working as intended but that’s just a guess from an onlooker.

Mittineague · May 24, 2016, 8:36pm

Yes, that is it.

The “single letter, no value” replacements are straight forward and look like they should work.

The problem is with the “has a value” regex.

\[color=([^\]]*)\]([^\[]*)\[/color\]
\[size=([^\]]*)\]([^\[]*)\[/size\]
\[font=([^\]]*)\]([^\[]*)\[/font\]
\[quote=([^\]]*)\]([^\[]*)\[/quote\]

It’s basically saying
… end bracket, capture everything until the first start bracket.

If the first character after the end bracket is a start bracket of a nested bbCode tag, it won’t capture as intended.

rjoseph244510 · May 29, 2016, 7:29am

Hi Ronpat

I see. Is there any way around this?

Again, any help would be fully appreciated

Best regards

Rod from the UK

oddz · June 3, 2016, 10:51pm

Arn’t there like 100s of libraries in a variety of languages that already do this. Why would you waste a week on this building your own.

rjoseph244510 · June 6, 2016, 9:56am

Hi Oddz

Thanks for your reply.

There probably is but I can’t find any in asp. Any direction would be fully appreciated

Best regards

Rod from the UK

ronpat · June 8, 2016, 1:57am

Have you managed to solve this issue, Rod?

rjoseph244510 · June 8, 2016, 7:10am

Hi Ronpat

Unfortunately not. I have hit a stumbling block and don’t know where to go next.

Best regards

Rod from the UK

Mittineague · June 8, 2016, 7:50am

I know there are browser plugins for regex, but I like this online site for testing patterns.

ronpat · June 8, 2016, 9:39am

Do you understand how to write simple, basic regex’s? I ask because most of the code that you posted seems well written. Was that copied from elsewhere or did you write it?

Assuming you wrote it, my next question is why did you attempt to write those 4 regex strings so they include the text between the open and close tags? Why did you not treat the open and close tags separately as you did the others? I don’t understand why it is important to include the text at that point. There is no reason that those tags should be the innermost tags.

I managed to create some rudamentary matches for the open color and font tags which includes the color code and font family name, and handled the close tags separately and it seemed to work. Success depends on uniformly written BB code and regexes that cover all reasonable variations/flavors of BB code.

For exampe, \[color=(#[0-9a-f]{3,6})\] will match RGB colors and this would convert it into HTML . (You may by using $1 where I am using \1.) You would need a different search string to find other color forms such as written names or rgba format if those exist in BB code. (I don’t remember seeing anything but rgb and simple words/colors.)

I may be naive, but I would suggest trying that approach. The tester that Mittineague linked to should help.

rjoseph244510 · June 9, 2016, 1:44pm

Hi Mittineague & Ronpat

Thanks so much for getting back to me.

Unfortunately, I know very little about Regex and it was indeed a code I found on the web. However, I “think” I get the general gist of what Ronpat is saying so I may have something to go on in addition to utilising the Rexex101.

Thanks again - this is very much appreciated!!

Best regards

Rod from the UK

oddz · June 9, 2016, 2:43pm

First google search result for “.NET bbcode parser”.

https://bbcode.codeplex.com/

Stuck for days?… really. What have you been doing…

rjoseph244510 · June 10, 2016, 6:40am

Hi Oddz

Thanks for your reply, it’s very much appreciated.

Unfortunately, my pages are on an Active Server Pages (ASP) platform not .aspx.

Best regards

Rod form the UK

system · September 9, 2016, 1:40pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.