将ansi字符转成html

最新推荐文章于 2024-05-09 10:07:24 发布

croder

最新推荐文章于 2024-05-09 10:07:24 发布

阅读量549

点赞数 1

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/daxiang52/article/details/129949056

版权

将ANSI字符转成html

问题

在项目遇到一个需求，需要将后台服务日志在web页面展示出来，而后台服务日志中包含部分ansi（用于在终端中文本着色），在

页面渲染时直接变成乱码。

根因

html不支持解析ansi字符，所以呈现出来就是乱码

解决方案

经过一番搜索，果然在github上找到了开源库解决这个问题：

ansi_up

这个库完美解决了我的问题，而且完美支持非npm项目，官方给的实例简单粗暴开箱即用，如下所示：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/ansi_up@5.1.0/ansi_up.min.js"></script>
</head>

<body>
    <div id="console"></div>
    <script>
        var txt = "\n\n\033[1;33;40m 33;40  \033[1;33;41m 33;41  \033[1;33;42m 33;42  \033[1;33;43m 33;43  \033[1;33;44m 33;44  \033[1;33;45m 33;45  \033[1;33;46m 33;46  \033[1m\033[0\n\n\033[1;33;42m >> Tests OK\n\n"

        var ansi_up = new AnsiUp;

        var html = ansi_up.ansi_to_html(txt);

        var cdiv = document.getElementById("console");

        cdiv.innerHTML = html;
    </script>
</body>

</html>

效果如图所示：
ansi显示

croder

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
将ansi字符转成html

在项目遇到一个需求，需要将后台服务日志在web页面展示出来，而后台服务日志中包含部分ansi（用于在终端中文本着色），在。html不支持解析ansi字符，所以呈现出来就是乱码。页面渲染时直接变成乱码。
复制链接

扫一扫