Javascript UBB代码

封面图 • 2025-10-23 • JavaScript

在 JavaScript 中，如果你想要处理 **UBB（Ultimate Bulletin Board）** 代码，通常是指将类似 BBCode 的语法转换为 HTML。UBB 是一种类似于 BBCode 的标记语言，常用于论坛、博客等系统中。

下面是一个简单的 **JavaScript UBB 转换器示例**，支持常见的 UBB 标签，如：

- `[b]...[/b]` → `...`
- `[i]...[/i]` → `...`
- `[url]...[/url]` → `<a href="...">...</a>`
- `[img]...[/img]` → `<img src="..." />`

---

### ✅ 示例：JavaScript UBB 转换函数

```javascript
function parseUBB(text) {
 // 替换 [b]...[/b]
 text = text.replace(/\[b\](.*?)$$/g, '$1');

// 替换 [i]...[/i]
 text = text.replace(/\[i\](.*?)$$/g, '$1');

// 替换 [url]...[/url]，可以带链接地址
 text = text.replace(/\[url=(.*?)\](.*?)$$/g, '<a href="$1" target="_blank">$2</a>');

// 替换 [url]...[/url]，没有指定链接时默认使用文本作为链接
 text = text.replace(/\[url\](.*?)$$/g, '<a href="$1" target="_blank">$1</a>');

// 替换 [img]...[/img]
 text = text.replace(/\[img\](.*?)$$/g, '<img src="$1" alt="Image" />');

return text;
}

// 示例用法
const ubbText = "[b]加粗文字[/b], [i]斜体文字[/i], [url=https://example.com]链接[/url], [img]https://example.com/image.jpg[/img]";
const htmlOutput = parseUBB(ubbText);
console.log(htmlOutput);
```

---

### 📌 输出结果：

```html
加粗文字, 斜体文字, <a href="https://example.com" target="_blank">链接</a>, <img src="https://example.com/image.jpg" alt="Image" />
```

---

### ✅ 扩展建议：

你可以根据需要添加更多标签支持，例如：

- `[quote]...[/quote]` → `<blockquote>...</blockquote>`
- `[code]...[/code]` → `<pre><code>...</code></pre>`
- `[color=red]...[/color]` → `...`

---

### 🔍 注意事项：

- 正则表达式要小心处理嵌套和转义字符。
- 如果你从用户输入获取内容，务必进行**HTML 转义**以防止 XSS 攻击。
- 可以使用 `DOMPurify` 或其他库来增强安全性。

---

如果你有特定的 UBB 标签需求或想实现更复杂的解析逻辑，欢迎告诉我，我可以帮你定制代码！