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
