Skip to content

πŸ€– Parse ansi into an array of ansi-tags and text-chunks.

License

Notifications You must be signed in to change notification settings

F1LT3R/parse-ansi

Repository files navigation

parse-ansi

πŸ€– Parse ansi into an array of ansi-tags and text-chunks.

Build Status Coverage Status NPM Version XO code style

Parse-ANSI takes an ANSI string as input:

const text = "πŸ€–\u001B[31m DANGER\u001B[0m Will Robbinson"
console.log(text)

Danger Will Robbinson

When you run your text through the ANSI parser...

const parseAnsi = require('parse-ansi')
const parsed = parseAnsi(text)
console.log(parsed)

...Parse-ANSI outputs value, position and style data.

{
    raw: 'πŸ€–\u001B[31m DANGER\u001B[0m Will Robbinson',    
    plain: 'πŸ€– DANGER Will Robbinson',
    textArea: {columns: 24, rows: 1},
    chunks: [{
        type: 'text',
        value: 'πŸ€–',
        position: {x: 0, y: 0, n: 0, raw: 0},
        style: {}
    }, {
        type: 'ansi',
        value: {tag: 'red', ansi: '\u001b[31m'},
        position: {x: 2, y: 0, n: 2, raw: 2}
    }, {
        type: 'text',
        value: ' DANGER',
        position: {x: 2,y: 0,n: 2, raw: 7},
        style: {
            foregroundColor: 'red'
        }
    }, {
        type: 'ansi',
        value: {tag: 'reset', ansi: '\u001b[0m'},
        position: {x: 9, y: 0, n: 9, raw: 14}
    }, {
        type: 'text',
        value: ' Will Robbinson',
        position: {x: 9, y: 0, n: 9, raw: 18},
        style: {}
    }]
}

This data can be used to convert ANSI sequences to other formatsm such as HTML, Image, SVG, etc.

Chunk

Each object in the output array is called a "chunk". Each chunk represents one or more of the following data types.

  1. ansi - ANSI escape sequence
  2. newline - Newline character
  3. text - Text chunk of like-styles

Style

The style object contains a list of styles associated with the current chunk. Each style represents an ANSI Escape sequence that is mapped to friendly name called an ANSI-Tag.

  • Styles are only included in text chunks.
  • Styles that are off/closed, are not present in the style object.

The following style object describes a chunk of red text:

{
    foregroundColor: 'red'
}

This object shows alls styles in combination:

{
    backgroundColor: 'bgRed',
    foregroundColor: 'white',
    dim: true,
    bold: true,
    italic: true,
    underline: true,
    strikethrough: true,
    inverse: true
}

Styles that are closed or reset are not included in the style object.

For example:

             // Turn on Bold
const text = '\u001b[1m BOLD' +
    // Turn off all styles
    '\u001b[0m NORMAL'

const parsed = parseAnsi(text)

const styles = parsed
    .filter(chunk => chunk.style)
    .map(chunk => chunk.style)

console.log(styles)

The above code should log:

[
    // Turn on Bold
    { bold: true },

    // Turn off all styles
    {}
]

Position

{x: 2, y: 0, n: 2, raw: 2}

The position object contains 4 kinds of position:

  1. x - Plain-text column at which the chunk starts
  2. y - Plain-text crow at which the chunk starts
  3. n - Linear, 1-dimensional plain-text position at which the chunk starts.
  4. raw - Linear 1-dimensional position at which the chunk starts for ANSI or plain-text. This is the real JavaScript position string position of the chunk.

Value

Text Value

The value of a text chunk is a JavaScript string. The value of a text chunk should never contain any ANSI escape sequences.

{
    type: 'text',
    value: ' DANGER',
}

ANSI Value

The value of an ansi chunk is an object.

  • value.tag - Friendly-named ansi-tag.
  • value.ansi - Raw ANSI string value.
{
    type: 'ansi',
    value: {
        tag: 'red',
        ansi: '\u001b[31m'
    }
}

You can find the list ansi-tags in types/types.ansi-seqs-to-ansi-tags.js.

Install

$ yarn add parse-ansi