将ansi字符转成html

将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>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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字符转成html_第1张图片

你可能感兴趣的:(html,前端,javascript)