【NPM库】- 0x01 - 码农教程

1. HTML 实体

1.1. 是什么？

HTML 实体是一段以连字号（&）开头、以分号（;）结尾的文本。实体常常用于显示保留字符（这些字符会被解析为 HTML 代码）和不可见的字符（如“不换行空格”）。你也可以用实体来代替其他难以用标准键盘键入的字符。

图1：几个例子

1.2. html-entities

用途：HTML 实体编码、解码库。

安装：

npm install html-entities

示例：

import { AllHtmlEntities } from 'html-entities';
const entities = new AllHtmlEntities();
console.log(entities.encode('<>"&©®∆')); // &lt;&gt;&quot;&amp;&copy;&reg;∆
console.log(entities.encodeNonUTF('<>"&©®∆')); // &lt;&gt;&quot;&amp;&copy;&reg;&#8710;
console.log(entities.encodeNonASCII('<>"&©®∆')); // <>"&©®&#8710;
console.log(entities.decode('&lt;&gt;&quot;&amp;&copy;&reg;')); // <>"&©®

encode — encodes, replacing characters to its entity representations. Ignores UTF characters with no entity representation.
encodeNonUTF — encodes, replacing characters to its entity representations. Inserts numeric entities for UTF characters.
encodeNonASCII — encodes, replacing only non-ASCII characters to its numeric entity representations.
decode — decodes, replacing entities to characters. Unknown entities are left as is.

2. ANSI 转义序列

2.1. 是什么？

ANSI 转义序列（ANSI escape sequence）是一种用于控制终端输出的色彩、样式、光标位置以及控制终端行为的特殊序列。

ANSI 转义序列使用 ASCII 码为 0x1b（8进制: 033, 10进制: 27）的字节作为转义字符, 而不是通常使用的反斜杠转义符 (0x5c)。这个字符是非打印字符, 被称为 ESC。

转义序列格式：ESC[<code><tail>
- ESC[ 被称作 Control Sequence Introducer (CSI), 它是大多数 ANSI 转义序列的开头。
- 字符 <tail> 则用于标志一个转义序列的结尾，不同的 tail 对应不同功能。
- <code> 则是转义序列的具体内容。
形如 ESC[n m 的转义序列也被称为 Select Graphic Rendition (SGR) 序列，用来描述此序列之后的字符在终端中的呈现格式。它采用字母 m 作为结尾。

示例1：入门

示例2：进阶

function printSingleLine(text){
    const MOVELEFT = '33[1000D';
    const CLEARLINE = '33[K';
    const RED = (text) => '33[31m' + text + '33[39m';
    process.stdout.write(MOVELEFT+CLEARLINE);
    process.stdout.write(RED(text));
}

class ProgressBar{
    constructor(labelValue, total, totalCellNums = 50) {
        this.labelValue = labelValue;
        this.total = total;
        this.totalCellNums = totalCellNums;
    }

    render(current){
        const curPercent = (current / this.total).toFixed(4);
        const curCellNums = Math.floor(curPercent * this.totalCellNums);

        let cells = "";
        for(let i=0; i<this.totalCellNums; i++){
            if(i<curCellNums){
                cells += '█';
            }else{
                cells += '░';
            }
        }

        const cmdTxt = `${this.labelValue}: ${(100*curPercent).toFixed(2)}% ${cells} ${current}/${this.total}`;

        printSingleLine(cmdTxt)
    }
}

function app(){
    const total = 200;
    let current = 0;
    const progressBar = new ProgressBar("下载进度", total)

    const download = () => {
        if (current <= total) {
            progressBar.render(current++);
            setTimeout(function (){
                download();
            }, 50)
        }
    };

    download();
}

app();

2.2. chalk

chalk（粉笔），即利用 ANSI 转义序列特性，产生带样式的控制台文本。

安装：

npm install --save chalk

示例：

2.3. ansi-html

可用于将 ANSI 序列转换为 HTML。

安装：

npm install ansi-html

示例：

import chalk from "chalk";
import ansiHTML from 'ansi-html';

export default function printMe(){
    const text = chalk.blue('Hello') + ' World' + chalk.red('!');

    console.log(JSON.stringify(text));
    console.log(text);
    console.log(ansiHTML(text));
}

参考：

--------------------------------------HTML 实体 Entity： https://developer.mozilla.org/zh-CN/docs/Glossary/Entity Named character references： https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references HTML entity encoder/decoder： https://mothereff.in/html-entities html-entities： https://github.com/mdevils/html-entities#readme --------------------------------------Ansi 转义序列 ANSI Escape sequences： http://ascii-table.com/ansi-escape-sequences.php ANSI Colors： https://mudhalla.net/tintin/info/ansicolor/