BBCode 转 HTML 是将 BBCode 标记语言转换为标准 HTML 的过程。BBCode 主要用于论坛、博客和文本编辑器中,通常被用于富文本格式化。BBCode 的标记格式比较简洁,常用的符号如 [] 来包围标记内容,而 HTML 则使用尖括号 < > 来包围标签。
1. BBCode 转 HTML 示例
假设你有以下的 BBCode 内容:
bbcode
[h1]Welcome to My Website[/h1]
[p]This is a [b]bold[/b] paragraph with [i]italic[/i] text.[/p]
[list]
[*]Item 1
[*]Item 2
[*]Item 3
[/list]
转换为 HTML 后,应该是这样的:
html
<h1>Welcome to My Website</h1>
<p>This is a <strong>bold</strong> paragraph with <em>italic</em> text.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
2. BBCode 转 HTML 常见标签转换规则
下面是一些常见的 BBCode 标记与 HTML 标签之间的转换关系:
BBCode 标记 HTML 标签 说明
[h1]...[/h1] <h1>...</h1> 标题
[b]...[/b] <strong>...</strong> 粗体
[i]...[/i] <em>...</em> 斜体
[u]...[/u] <u>...</u> 下划线
[url]...[/url] <a href="...">...</a> 链接
[img]...[/img] <img src="..."> 图片
[quote]...[/quote] <blockquote>...</blockquote> 引用
[code]...[/code] <pre><code>...</code></pre> 代码块
[list]...[/list] <ul>...</ul> 无序列表
[*] <li>...</li> 列表项
[center]...[/center] <div style="text-align:center">...</div> 居中
[br] <br> 换行符
[size=... ]...[/size] <span style="font-size:...">...</span> 字体大小
[color=...]...[/color] <span style="color:...">...</span> 字体颜色
3. 手动将 BBCode 转换为 HTML
你可以手动将 BBCode 标记转换为 HTML 标签,以下是一些常见的 BBCode 转换为 HTML 的规则:
1. 标题标签
BBCode:
bbcode
[h1]Welcome to My Website[/h1]
HTML:
html
<h1>Welcome to My Website</h1>
2. 粗体和斜体
BBCode:
bbcode
[b]Bold Text[/b]
[i]Italic Text[/i]
HTML:
html
<strong>Bold Text</strong>
<em>Italic Text</em>
3. 链接
BBCode:
bbcode
[url=https://www.example.com]Click Here[/url]
HTML:
html
<a href="https://www.example.com">Click Here</a>
4. 图片
BBCode:
bbcode
[img]https://www.example.com/image.jpg[/img]
HTML:
html
<img src="https://www.example.com/image.jpg" />
5. 列表
BBCode:
bbcode
[list]
[*]Item 1
[*]Item 2
[*]Item 3
[/list]
HTML:
html
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>