Simple and practical conversion script tool from HTML to UBB

Source: Internet
Author: User

You may be a sharing technician. Although you are not a technical expert, you want to share what you know with netizens through a blog. To let more people know about your experience, you may try to publish your blog to professional forums. Now there is a bit of trouble: most blog editors support HTML publishing, while most forums support UBB, which means you cannot directly copy and publish previous blog articles to the Forum. What should we do? Manually modify tags one by one? This is obviously too troublesome. Besides, lazy is a human nature! I am also a lazy, so I wrote a tool to help myself convert the HTML of my blog into the UBB format suitable for Forum Publishing, even if it cannot be completely converted, but I have helped my province to do a lot of work.

Because I have been engaged in WEB Front-end development, I know the importance of HTML semantics and how standard encoding is made. Therefore, the HTML published on my blog meets the following standards and uses these standards, this helps you achieve HTML-to-UBB conversion more successfully:

(1) All tags are legally nested and end normally
(2) The title uses the h label and the section uses the p label.
(3) Each blog image occupies one row and is centered. the img label is also placed as a new paragraph in the p label.
(4) The code snippets are generated using the blog garden editor and are the content blocks contained by a div label.

The code of this HTML 2 UBB Conversion Tool is as follows. Through the code, you can see that this is achieved through repeated replacement of regular expressions. To optimize the replacement speed, I will replace a lot of useless HTML content first, in this way, other methods do not need to replace the content. For example, the code snippets generated by the blog editor are the targets to be replaced first, it will be replaced with "[code] Here is the code snippet [/code]", and the text in the middle will be replaced with the actual code.

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> HTML 2 UBB </title>
<Style type = "text/css">
* {Margin: 0; padding: 0}

# Layout {width: 800px; margin: 10px auto}
Textarea {width: 800px; height: 250px; font-size: 12px}
Input {width: 800px; height: 30px; margin: 10px 0}
</Style>
</Head>

<Body>
<Div id = "layout">
<Textarea id = "inputCode"> </textarea>
<Input type = "button" id = "transform" value = "[conversion] http://blog.csdn.net/webflash" onclick = "transform ()"/>
<Textarea id = "outputCode"> </textarea>
</Div>

<Script type = "text/javascript">
Function transform ()
{
Var html = document. getElementById ('inputcode'). value;

Html = html. replace (/\ n/g ,'');
Html = html. replace (/<div. *?> (. + ?) <\/Div>/ig, '[code] Here is the code snippet [/code] \ n \ n ');
Html = html. replace (/<p. *?> (. + ?) <\/P>/ig, '$1 \ n \ n ');
Html = html. replace (/<br \/?> /Ig, '\ n \ n ');
Html = html. replace (/<a. +? Href = "(. + ?) ". *?> (. + ?) <\/A>/ig, '[url = $1] $2 [/url]');
Html = html. replace (/ /Ig, '[align = center] [/align]');
Html = html. replace (/<strong> (. + ?) <\/Strong>/ig, '[B] $1 [/B]');
Html = html. replace (/


Document. getElementById ('outputcode'). value = html;
Document. getElementById ('outputcode'). select ();
}
</Script>
</Body>
</Html>

The tool is used (see the figure below): copy the HTML code you edited before publishing it to your blog and put it in the text box, and then click the "convert" button in the middle, in this way, the tool will generate the UBB text you want to paste to the Forum in the text box below, and the target code is selected, you can copy it.

Note:If your HTML code is different from my standards, the conversion will certainly fail. You can modify some code of this tool according to your own code standards to achieve the desired effect. This article only provides an idea.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.