ansi控制码

最近在搞终端的咚咚,涉及到ansi控制码的问题,网上搜了一通,也学到不少。如果你telnet到一个linux服务器上,然后输入命令,比如vi test.c,然后客户端可以看到test.c文件的内容,如果抓包的话,可以看到数据包里面不止包括test.c的内容,还有一些看似乱码的东西。比如下面这种:

int num, fd;/033[22;9Hchar m[6000];/033[23;9Hchar r[6000];/033[24;9H// struct rlimit rl;/033[25;9H// i

以“/033[ ”开头的就是ansi控制码了。使用ansi控制码可以控制字符的位置,显示的效果(颜色,反显等)。

我原来用SecureCRT来telnet linux服务器时,默认没有开颜色方案,效果就是:

SecureCRT

没颜色,只有加不加粗。

启用SecureCRT颜色方案后,感觉怪怪的,好像有些地方显示不对。如果用putty的话效果就好多了:

PuTTY

可以看到有不同颜色。还有背景色。

如果要清除控制码的话,可以使用正则表达式(这个还没学过,以后再弄。)

### Vue中处理ANSI控制序列的方法 为了在Vue应用程序中正确处理和显示包含ANSI控制字符的字符串,可以采用专门设计用于转换这些控制字符为HTML的安全库。一种推荐的方式是利用`ansi-to-html`这样的工具[^4]。 #### 安装依赖包 首先,在项目根目录执行npm安装命令引入所需的库: ```bash npm install ansi-to-html --save ``` #### 创建辅助函数 接着创建一个辅助函数用来将含有ANSI代码的日志消息转变为适合网页展示的形式: ```javascript import AnsiToHtml from 'ansi-to-html'; const converter = new AnsiToHtml(); function convertAnsiToHtml(logMessage) { return converter.toHtml(logMessage); } ``` 此段JavaScript代码初始化了一个`AnsiToHtml`实例,并定义了名为`convertAnsiToHtml()`的新函数,该函数接收一条日志记录作为参数并返回相应的HTML版本。 #### 组件内部集成 最后一步是在Vue组件里调用上述方法,假设有一个名为`LogViewer.vue`的单文件组件如下所示: ```html <template> <div class="log-viewer"> <!-- 使用v-html指令绑定经过转化后的日志内容 --> <pre v-html="formattedLogs"></pre> </div> </template> <script> export default { props: ['logs'], computed: { formattedLogs() { // 调用之前定义好的辅助函数来格式化输入的日志数据 return this.logs.map(convertAnsiToHtml).join('<br>'); } } }; </script> ``` 这段模板展示了如何通过props传递原始日志数组给子组件,再经由计算属性`formattedLogs`进行加工后呈现于界面上。值得注意的是这里运用到了`v-html`指令以便能直接渲染最终得到的HTML片段。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值