最近在写一个浅谈 SSH 协议的系列文字,需要在网页上以十六进制方式展示一些传输数据,搜了一下前人工作,找到一个最接近我的需求的项目,在此基础上做了一下修改,命名为 Hex0r+。
项目地址:https://github.com/ihainan/Hex0r-Plus
效果
可以把 ASCII 文字作为输入:
或者是 Base64 编码后的二进制数据:
支持高亮任意范围的数据,可以自定义颜色和提示文本:
支持设置成鼠标指针进到特定范围之后才高亮该区域:
改进
在原来的项目上做了一些改进:
- 修复自定义颜色完全不生效的问题。
- 修复右侧 ASCII 文本与左侧十六进制对不上的问题。
- 支持右侧 ASCII 文本和左侧十六进制同步高亮。
- 支持设置成鼠标指针进入区域后才高亮。
- 高亮列表中,提示文本支持使用
,
和 :
,但是需要进行转义 \,
和 \:
。
- 添加默认值。
用法
参数解释参见:https://github.com/ihainan/Hex0r-Plus#options
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
| <html>
<head> <title>Hex0r Examples</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="hex0r.min.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="hex0r.min.css" /> </head>
<body> <div class="hex0rwindow" data-row-width="16" data-word-size="1" data-row-break="8" data-trim="true" data-base64="true" data-caption="SSH Protocol - Client's Algorithm List" data-highlight-on-hover-only="true" data-highlights=" 0:3:#F4FA58: Packet Length (= 196) // 4 bytes, 4:4:#F4FA58: Padding Length (= 6) // 1 byte, 5:5:#F4FA58: SSH_MSG_KEXINIT // 1 byte, 6:21:#F4FA58: Cookie // 16, 22:94:#F4FA58: kex_algorithms // 4 + 69 bytes, 95:110:#F4FA58: server_host_key_algorithms // 4 + 12 bytes, 111:124:#F4FA58: encryption_algorithms_client_to_server // 4 + 10 bytes, 125:138:#F4FA58: encryption_algorithms_server_to_client // 4 + 10 bytes, 139:151:#F4FA58: mac_algorithms_client_to_server // 4 + 9 bytes, 152:164:#F4FA58: mac_algorithms_server_to_client // 4 + 9 bytes, 165:172:#F4FA58: compression_algorithms_client_to_server // 4 + 4 bytes, 173:180:#F4FA58: compression_algorithms_server_to_client // 4 + 4 bytes, 181:184:#F4FA58: languages_client_to_server // 4 + 0 bytes, 185:188:#F4FA58: languages_client_to_server // 4 + 0 bytes, 189:189:#F4FA58: first_kex_packet_follows // 1 byte, 190:193:#F4FA58: 0 (int\,reserved for future extension) // 4 bytes, 194:199:#F4FA58: Padding // 6 bytes" data-show-line-nums="true" title="SSH Protocol - Client's Algorithm List"> AAAAxAYUbzQ63GkVhEqdhC02TJzuywAAAEVkaWZmaWUtaGVsbG1hbi1ncm91cDE0LXNoYTI1NixleHQtaW5mby1jLGtleC1zdHJpY3QtYy12MDBAb3BlbnNzaC5jb20AAAAMcnNhLXNoYTItNTEyAAAACmFlczI1Ni1jdHIAAAAKYWVzMjU2LWN0cgAAAAlobWFjLXNoYTEAAAAJaG1hYy1zaGExAAAABG5vbmUAAAAEbm9uZQAAAAAAAAAAAAAAAAAAAAAAAAA= </div> </body>
</html>
|