当前位置：首页 > JavaScript

js实现ubb

2026-02-01 07:10:03JavaScript

UBB标签转HTML的实现方法

使用JavaScript实现UBB到HTML的转换，核心是通过正则表达式匹配UBB标签并替换为对应的HTML标签。以下是常见UBB标签的转换方法：

function ubbToHtml(ubbStr) {
    // 基本标签转换
    let html = ubbStr.replace(/\[b\](.*?)\[\/b\]/g, '<strong>$1</strong>');
    html = html.replace(/\[i\](.*?)\[\/i\]/g, '<em>$1</em>');
    html = html.replace(/\[u\](.*?)\[\/u\]/g, '<u>$1</u>');

    // 链接处理
    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>');

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

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

    // 换行处理
    html = html.replace(/\n/g, '<br>');

    return html;
}

安全过滤的实现

在转换UBB时需要考虑XSS安全防护，应对输入内容进行过滤：

function safeFilter(html) {
    return html.replace(/<script.*?>.*?<\/script>/gi, '')
               .replace(/javascript:/gi, '')
               .replace(/onerror/gi, '')
               .replace(/onload/gi, '');
}

复杂标签的扩展处理

对于更复杂的UBB标签如表格、列表等，需要更细致的处理：

// 表格处理
function handleTable(ubbStr) {
    return ubbStr.replace(/\[table\](.*?)\[\/table\]/gs, function(match, content) {
        const rows = content.split('[tr]');
        let tableHtml = '<table>';

        rows.forEach(row => {
            if(!row) return;
            tableHtml += '<tr>';
            const cells = row.split('[td]');
            cells.forEach(cell => {
                if(!cell) return;
                tableHtml += `<td>${cell.replace(/\[\/td\]/g, '')}</td>`;
            });
            tableHtml += '</tr>';
        });

        return tableHtml + '</table>';
    });
}

实际应用示例

将上述方法组合使用：

js实现ubb

const ubbText = '[b]加粗文本[/b] [url=https://example.com]链接[/url]';
const safeHtml = safeFilter(ubbToHtml(ubbText));
console.log(safeHtml);
// 输出: <strong>加粗文本</strong> <a href="https://example.com" target="_blank">链接</a>