Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

background

Let’s talk about the background and why

Most libraries use the Chalk library in the logs to color the contents of the console

After being processed with Chalk, the original contents will be called ‘\x1B… ‘the parcel

console.log(chalk.blue('green'));
console.log([chalk.blue('green')]);
Copy the code

When developing viet-plugin-monitor, in order to retrieve the original log content (before coloring), the colored string needs to be restored

\x1B[34mgreen\x1B[39m => green
Copy the code

A problem was discovered when using the re to process content

'\x1B'.replace(/\\x/.' ') // Result??
Copy the code

Look at the length through.length, and the result looks like the title

why

The backslash “\” usually identifies escape characters, such as \n(newline),\t(TAB)

While \x denotes a hexadecimal number followed by two hexadecimal numbers

At the same time, there is also the symbol \u hexadecimal, but it must be followed by four hexadecimal numbers

So \x1B here is actually a character

'\x41'= = ='A'   // true
'A'= = ='\u0041' // true
Copy the code

\x

\ XHH matches a character represented by a two-digit hexadecimal number (\x00-\xFF)

Mainly used for ASCII code representation

'\x41'= = = 'A''A'= = =String.fromCharCode(65)

'\x61'= = = 'a''a'= = =String.fromCharCode(97)
Copy the code

\x must be followed by two hexadecimal characters, otherwise an error will be reported, where a-f is case insensitive

'\x1' // Uncaught SyntaxError: Invalid hexadecimal escape sequence
'\xfg' // Uncaught SyntaxError: Invalid hexadecimal escape sequence
Copy the code

\u

\ uHHhh matches a Unicode character represented by a four-digit hexadecimal number (\u0000-\uFFFF).

Matching Chinese characters is common in regular expressions

const r = /[\u4e00-\u9fa5]/
r.test('Chinese') // true
r.test('English') // false
Copy the code

Strings intertranslate with Unicode

str2Unicode

  1. useString.prototype.charCodeAtGets the Unicode code point for the specified position (in decimal)
  2. useString.prototype.toStringConvert it to a hexadecimal character. Converting to a hexadecimal character does not automatically fill in zeros
  3. throughString.prototype.padStartTo fill0

The general processing method written is as follows

function str2Unicode(str) {
    let s = ' '
    for (const c of str) {
        s += `\\u${c.charCodeAt(0).toString(16).padStart(4.'0')}`
    }
    return s
}

str2Unicode('1 a Chinese') // '\\u0031\\u0061\\u4e2d\\u6587'
Copy the code

unicode2Str

  1. Through regular/\\u[\da-f]{4}/gMatches all Unicode characters
  2. useNumberwill0x${matchStr}Convert to base 10
  3. useString.fromCodePointConverts Unicode code points to characters
  4. useString.prototype.replacePerform character – by – character conversion
function unicode2Str(str) {
    const unicodeList = str.match(/\\u[\da-f]{4}/g) | | []return unicodeList.reduce((pre, u) = > {
        return pre.replace(u, String.fromCodePoint(Number(`0x${u.slice(2)}`)))
    }, str)
}

unicode2Str('1 \ \ u0061 \ \ u4e2d') / / 1 a Chinese
Copy the code

Restore the string processed by Chalk

Writing your own re from 0-1 inevitably leads to a number of ill-considered boundary cases, so chalk/ ansi-Regex was found in the README for Chalk

You can match ANSI escape codes associated with color values

import ansiRegex from 'ansi-regex';

'\u001B[4mcake\u001B[0m'.match(ansiRegex());
//=> ['\u001B[4m', '\u001B[0m']

'\u001B[4mcake\u001B[0m'.match(ansiRegex({onlyFirst: true}));
//=> ['\u001B[4m']
Copy the code

Write the processing method

function resetChalkStr(str) {
    return str.replace(ansiRegex(), ' ')}Copy the code

test

console.log(chalk.green('green'), chalk.greenBright('greenBright'));

console.log([chalk.green('green'), chalk.greenBright('greenBright')]);

console.log(resetChalkStr(`${chalk.green('green')} ${chalk.greenBright('greenBright')}`));
Copy the code

conclusion

Revisiting the contents of \x and \u, suddenly an extra point occurred to me, using \u to do string encryption and decryption.

Fixed a Chalk related issue: “Restore the color content of the log in the terminal”