Simple and practical HTML to UBB Conversion Script Tool implementation Instructions _javascript tips

Source: Internet
Author: User
Now a little bit of trouble: Blog Editor to support HTML publishing, and the forum is mostly support UBB, which means that you want to publish previously published in the blog post directly to the forum is not a copy. What do we do? Manual label change? This is obviously too troublesome, and lazy is human nature, ha! I am also a lazy person, so I wrote a tool that can help me to convert the HTML of the blog into a UBB format suitable for the forum release, even if it can not be completely converted, but has helped me save a lot of work.

Since I've been working on Web front-end development, I know the importance of HTML semantics and how standard coding is, so the HTML I publish in blogs meets the following criteria, which are useful for more successful HTML to UBB conversions:

(1) All tags are legally nested and end normally
(2) Small headings using H tags, paragraphs using p tags
(3) Each blog drawing occupies one line and centered, the IMG tag is also placed in the P tag as a new paragraph
(4) The code fragment is generated with the blog Garden Editor, is a div tag contains the content block

This HTML 2 UBB conversion tool code is as follows. You can see through the code that this is done with the regular expression repeated substitution, in order to optimize the replacement speed, I replaced the potentially large amount of useless HTML, so that the rest of the methods do not need to replace the contents, such as the blog editor generated by the code fragment is to replace the target first, it will be replaced by "[ Code] Here is a snippet [/code], and then you can replace the middle text with the actual code.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>html 2 ubb</title> <style type=" Text/css "> * {margin:0; padding:0} #layo UT {width:800px margin:10px Auto} textarea {width:800px; height:250px; font-size:12px} input {width:800px; margin:10px 0} </style> </pead> <body> <div id= "Layout" > <textarea id= "Inputcode" >< /textarea> <input type= "button" id= "Transform" "value=" "Convert" "onclick=" transform () "/> <textarea id=" Outputcode "></textarea> </div> <script type=" Text/javascript "> Function transform () {var ht ml = document.getElementById (' Inputcode '). Value; html = html.replace (/\n/g, ' "); html = Html.replace (/<div.*?> (. +?) <\/div>/ig, ' [Discuz_code_0]\n\n ']; html = Html.replace (/<p.*?> (. +?) <\/p>/ig, ' $1\n\n '); html = html.replace (/<br\/?>/ig, ' \ n '); html = Html.replace (/<a.+?href= "(. +?)". *?> (. +?) <\/a>/ig, ' [Url=$1]$2[/url] '); html = html.replace (//ig, ' [align=center][img]$1[/img][/align] '); html = Html.replace (/<strong> (. +?) <\/strong>/ig, ' [b]$1[/b] '); html = Html.replace (/<p\d> (. +?) <\/h\d>/ig, ' [size=3][b]$1[/b][/size]\n\n ']; document.getElementById (' Outputcode '). Value = HTML; document.getElementById (' Outputcode '). Select (); } </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

The use of the tool is (refer to the drawings below): Copy your own edited HTML code before posting to the blog in the upper text box, and then click on the middle of the "convert" button, so the tool will be in the text box below you want to paste into the forum UBB text, while the target code is selected, you copy it.


NOTE: If your HTML code is not the same as my standard, the conversion will definitely go wrong, you can modify the tool's code according to your code standard to make it achieve the desired effect. This article just provides a thought. Author Webflash

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.