JSFiddle - React, Tailwind, and code Playground

by ukyo

JavaScript

var words = [
  'abcdef',
  'aaa_______',
  '______bbb',
  'ccc',
  '___ddd___',
  'aa_____dd',
  'JavaScript',
  'javascript',
  'ジャバスクリプト',
  'ジャヴァスクリプト',
  'ジャバスプリクト',
  ' js',
  '   JS   '
];

var tree = {
  type: 'or',
  children: [
    {
      type: 'and',
      children: [
        {
          type: 'rule',
          op: 'startsWith',
          text: 'ab'
        },
        {
          type: 'rule',
          op: 'endsWith',
          text: 'ef'
        },
        {
          type: 'rule',
          op: 'strictEqual',
          text: 'abcdef'
        },
        {
          type: 'rule',
          op: 'includes',
          text: 'bcde'
        },
        {
          type: 'rule',
          op: 'regexp',
          text: '^a.+f$'
        },
      ]
    },
    {
      type: 'and',
      children: [
        {
          type: 'rule',
          op: 'notStartsWith',
          text: 'aaa'
        },
        {
          type: 'rule',
          op: 'notEndsWith',
          text: 'bbb'
        },
        {
          type: 'rule',
          op: 'notStrictEqual',
          text: 'ccc'
        },
        {
          type: 'rule',
          op: 'notIncludes',
          text: 'ddd'
        },
        {
          type: 'rule',
          op: 'notRegexp',
          text: '^aa.+dd$'
        },
      ]
    },
    {
      type: 'or',
      children: [
        {
          type: 'rule',
          op: 'regexp',
          text: '^\s*[Jj]ava[Ss]cript\s*$'
        },
        {
          type: 'rule',
          op: 'regexp',
          text: '^\s*ジャ(ヴァ|バ)スクリプト\s*$'
        },
        {
          type: 'rule',
          op: 'regexp',
          text: '^\s*JS|js\s*$'
        },
      ]
    }
  ]
}

var inlineValidators = {
  startsWith: s => `s.startsWith('${s}')`,
  endsWith: s => `s.endsWith('${s}')`,
  strictEqual: s => `(s === '${s}')`,
  includes: s => `s.includes('${s}')`,
  regexp: s => `/${s}/.test(s)`,
  notStartsWith: s => `!s.startsWith('${s}')`,
  notEndsWith: s =>...