当前位置：首页 > JavaScript

js实现ubb

2026-04-05 23:39:56JavaScript

UBB 转 HTML 的实现方法

UBB（Universal Bulletin Board）是一种常见的论坛标记语言，类似于 HTML 但更简单。以下是通过 JavaScript 将 UBB 转换为 HTML 的方法。

js实现ubb

基本 UBB 标签替换

使用正则表达式替换常见的 UBB 标签为对应的 HTML 标签：

js实现ubb

function ubbToHtml(ubbText) {
    let html = ubbText;

    // 加粗 [b]...[/b]
    html = html.replace(/\[b\](.*?)\[\/b\]/g, '<strong>$1</strong>');

    // 斜体 [i]...[/i]
    html = html.replace(/\[i\](.*?)\[\/i\]/g, '<em>$1</em>');

    // 下划线 [u]...[/u]
    html = html.replace(/\[u\](.*?)\[\/u\]/g, '<u>$1</u>');

    // 链接 [url]...[/url] 或 [url=...]...[/url]
    html = html.replace(/\[url=(.*?)\](.*?)\[\/url\]/g, '<a href="$1" target="_blank">$2</a>');
    html = html.replace(/\[url\](.*?)\[\/url\]/g, '<a href="$1" target="_blank">$1</a>');

    // 图片 [img]...[/img]
    html = html.replace(/\[img\](.*?)\[\/img\]/g, '<img src="$1" />');

    // 颜色 [color=...]...[/color]
    html = html.replace(/\[color=(.*?)\](.*?)\[\/color\]/g, '<span style="color:$1">$2</span>');

    // 字体大小 [size=...]...[/size]
    html = html.replace(/\[size=(.*?)\](.*?)\[\/size\]/g, '<span style="font-size:$1px">$2</span>');

    return html;
}

处理嵌套标签

上述方法无法处理嵌套标签（如 [b][i]...[/i][/b]），改进版本：

function ubbToHtmlAdvanced(ubbText) {
    const tags = [
        { ubb: /\[b\](.*?)\[\/b\]/g, html: '<strong>$1</strong>' },
        { ubb: /\[i\](.*?)\[\/i\]/g, html: '<em>$1</em>' },
        { ubb: /\[u\](.*?)\[\/u\]/g, html: '<u>$1</u>' },
        { ubb: /\[url=(.*?)\](.*?)\[\/url\]/g, html: '<a href="$1" target="_blank">$2</a>' },
        { ubb: /\[url\](.*?)\[\/url\]/g, html: '<a href="$1" target="_blank">$1</a>' },
        { ubb: /\[img\](.*?)\[\/img\]/g, html: '<img src="$1" />' },
        { ubb: /\[color=(.*?)\](.*?)\[\/color\]/g, html: '<span style="color:$1">$2</span>' },
        { ubb: /\[size=(.*?)\](.*?)\[\/size\]/g, html: '<span style="font-size:$1px">$2</span>' }
    ];

    let html = ubbText;
    let lastHtml;

    do {
        lastHtml = html;
        tags.forEach(tag => {
            html = html.replace(tag.ubb, tag.html);
        });
    } while (html !== lastHtml);

    return html;
}

处理换行和特殊字符

UBB 通常使用 \n 表示换行，需要转换为 <br>：

function ubbToHtmlWithNewlines(ubbText) {
    let html = ubbToHtmlAdvanced(ubbText);
    html = html.replace(/\n/g, '<br>');
    html = html.replace(/&/g, '&amp;')
               .replace(/</g, '&lt;')
               .replace(/>/g, '&gt;')
               .replace(/"/g, '&quot;')
               .replace(/'/g, '&#39;');
    return html;
}

使用示例

const ubbText = '[b]加粗文本[/b] [i]斜体文本[/i]\n[url=https://example.com]示例链接[/url]';
const html = ubbToHtmlWithNewlines(ubbText);
console.log(html);
// 输出: <strong>加粗文本</strong> <em>斜体文本</em><br><a href="https://example.com" target="_blank">示例链接</a>