Appearance
formatTextToHtml文本转HTML
Hidden Title
基础用法：
formatTextToHtml(text)基础用法
说明
formatTextToHtml 用于把纯文本里的换行符和制表符转换成可直接渲染的 HTML 片段，常用于日志详情、错误信息、文件元信息等需要保留排版的展示场景。
调用形式
ts
formatTextToHtml(text)formatTextToHtml(text)参数说明
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
text | string | T | 是 | - | 要转换的文本。只有字符串会被转换，其他类型会原样返回。 |
返回值
字符串输入会返回转换后的 HTML 字符串；非字符串、空值会原样返回。
转换规则：
| 原始字符 | 转换结果 | 说明 |
|---|---|---|
\n | <br> | 保留换行展示。 |
\t | | 把制表符转换成 4 个空格效果。 |
常用场景
ts
formatTextToHtml('Hello\nWorld')
// 'Hello<br>World'
formatTextToHtml('Name\tValue')
// 'Name Value'formatTextToHtml('Hello\nWorld')
// 'Hello<br>World'
formatTextToHtml('Name\tValue')
// 'Name Value'注意事项
返回值通常配合 v-html 或 Element Plus 消息的 dangerouslyUseHTMLString 使用。这个函数只转换换行和制表符，不会过滤用户输入的 HTML；渲染不可信内容前需要自行做安全处理。
函数源码
formatTextToHtml
来源：packages/utils/src/format.ts
/**
* 将纯文本中的换行和制表符转换成可直接渲染的 HTML 片段。
*
* @param str 需要格式化的文本。
* @returns 字符串输入会返回转换后的 HTML；非字符串输入会原样返回。
*
* @example
* formatTextToHtml('第1行\n\t第2行')
* // => '第1行<br> 第2行'
*/
export function formatTextToHtml(str: string): string
export function formatTextToHtml<T>(str: T): T
export function formatTextToHtml(str: unknown): unknown {
if (!str || typeof str !== 'string') {
return str
}
const withBreaks = str.replace(/\n/g, '<br>')
return withBreaks.replace(/\t/g, ' ')
}