Skip to content
No description, website, or topics provided.
JavaScript CSS HTML Shell
Branch: develop
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Algolia filters JS syntax validator

This package implements the parsing logic of filters of the Algolia search engine in JavaScript. On top of this it renders HTML to allow to have a visual output. This is especially useful when there is an error in the output.

Table of content

How to install


<script src=""></script>


// `npm install algolia-filters-js-syntax-validator --save`
// or
// `yarn add algolia-filters-js-syntax-validator`

const Parser = require('algolia-filters-js-syntax-validator');

How to use

const parser = new Parser();
const response = parser.parse('A OR B');

The response object will contain 3 attributes:

  • response.html: contains the html containing span elements. Each span has classes that can be used to add color to each tokens. In most cases you will just display this string.
  • response.errorMessage:
    • if the input is not valid: string containing the error message
    • if the input is valid: empty string
  • response.tokens: the list of tokens. can be used for advanced display in case response.html does not fit the need.
    • type: Type of the token
    • value: value of the token
    • raw_value: same as value but contains quotes (if present) for string types.
    • pos: position of the token in the input
    • errorStart: whether an error starts at this token
    • errorStop: whether an error ends at this token
    • unexpectedMessage: contains an error message if the token is not expected
    • afterSeparators: string containing spaces present before the next token
    • cssClasses: list of cssClasses to be applied to the token span
    • afterSeparatorsCssClasses: list of cssClasses to be applied to the spaces span

Example of response object

   "html":"<span class=\"token First_Token\"></span><span class=\"token-spaces\">[...]",

CSS Classes

Type of span:

  • token
  • token-spaces


  • unexpected


  • Token_OR
  • Token_AND
  • Token_NOT
  • Token_Range
  • Token_Num
  • Token_Empty_Str
  • Token_String
  • Token_Incomplete_Str
  • Token_Operator
  • Token_Open_Angled_Bracket
  • Token_Close_Angled_Bracket
  • Token_Error
  • Token_Open_Backet
  • Token_Close_Bracket
  • Token_Facet_Separator
  • Token_Coma
  • Token_Error
  • Token_EOF


Launch the dev environment

yarn watch

You can test the output by opening dev/index.html in your web browser

Run the tests

yarn test

The code contribution process

On your side:

  • Fork and clone the project
  • Create a new branch for what you want to solve
  • Make your changes
  • Open a pull request on the develop branch


  • Peer review of the pull request (by at least one of the core contributors)
  • Automatic tests
  • When everything is green, your contribution is merged 🚀
You can’t perform that action at this time.