{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/4","result":{"data":{"markdownRemark":{"id":"c545ea35-183b-562d-8d56-c8e50b4ab477","html":"

profane words & bad words 관련 오픈소스

\n
    \n
  1. https://github.com/web-mech/badwords
    2. \n
  2. https://github.com/ChaseFlorell/jQuery.ProfanityFilter.git
    3. \n
  3. https://github.com/dariusk/wordfilter
    4. \n
\n

1, 2, 3번 오픈소스의 코드를 살펴본 결과,

\n

2번 코드는 old style 코드라고 판단이 들었다.\n3번은 javascript와 python 버젼 중 하나를 선택해야 한다.\n요즘 javascript를 연습하는 김에, 그리고 회원가입 입력값 관련 validation은 프론트 단에서 처리하는 것이 낫다고 생각하여\n이 작업은 javascript로 하기로 결정.

\n

그렇다면 1번과 3번 중 하나를 선택해야 했다.

\n

1번 코드

\n
const localList = require('./lang.json').words;\nconst baseList = require('badwords-list').array;\n\nclass Filter {\n\n  /**\n   * Filter constructor.\n   * @constructor\n   * @param {object} options - Filter instance options\n   * @param {boolean} options.emptyList - Instantiate filter with no blacklist\n   * @param {array} options.list - Instantiate filter with custom list\n   * @param {string} options.placeHolder - Character used to replace profane words.\n   * @param {string} options.regex - Regular expression used to sanitize words before comparing them to blacklist.\n   * @param {string} options.replaceRegex - Regular expression used to replace profane words with placeHolder.\n   * @param {string} options.splitRegex - Regular expression used to split a string into words.\n   */\n  constructor(options = {}) {\n    Object.assign(this, {\n      list: options.emptyList && [] || Array.prototype.concat.apply(localList, [baseList, options.list || []]),\n      exclude: options.exclude || [],\n      splitRegex: options.splitRegex || /\\b/,\n      placeHolder: options.placeHolder || '*',\n      regex: options.regex || /[^a-zA-Z0-9|\\$|\\@]|\\^/g,\n      replaceRegex: options.replaceRegex || /\\w/g\n    })\n  }\n\n  /**\n   * Determine if a string contains profane language.\n   * @param {string} string - String to evaluate for profanity.\n   */\n  isProfane(string) {\n    return this.list\n      .filter((word) => {\n        const wordExp = new RegExp(`\\\\b${word.replace(/(\\W)/g, '\\\\$1')}\\\\b`, 'gi');\n        return !this.exclude.includes(word.toLowerCase()) && wordExp.test(string);\n      })\n      .length > 0 || false;\n  }
\n

아직 es6 자바스크립트가 잘 읽히지 않는 내게.. 1번 코드는 심플하지 않다.

\n

3번 코드

\n
/*\n * wordfilter\n * https://github.com/dariusk/wordfilter\n *\n * Copyright (c) 2013 Darius Kazemi\n * Licensed under the MIT license.\n */\n\n'use strict';\n\nvar blacklist, regex;\n\nfunction rebuild() {\n  regex = new RegExp(blacklist.join('|'), 'i');\n}\n\nblacklist = require('./badwords.json');\nrebuild();\n\nmodule.exports = {\n  blacklisted: function(string) {\n    return !!blacklist.length && regex.test(string);\n  },\n  addWords: function(array) {\n    blacklist = blacklist.concat(array);\n    rebuild();\n  },\n  removeWord: function(word) {\n    var index = blacklist.indexOf(word);\n    if (index > -1) {\n      blacklist.splice(index, 1);\n      rebuild();\n    }\n  },\n  clearList: function() {\n    blacklist = [];\n    rebuild();\n  },\n};
\n

누가 봐도 1번 보단 심플한 3번 코드를 사용하기로 결정했다.

\n

regex = new RegExp(blacklist.join('|'), 'i');

\n

join()은 배열의 모든 요소를 연결해 하나의 문자열로 만든다.\n참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join\njoin의 결과값이 어떻게 나오는 지 확인하기 위해 codesandbox 에서 테스트를 해보았다.

\n
// badwords.json\n[\"weport\", \"admin\"]
\n
$.getJSON(\"src/badwords.json\", function() {})\n  .done(function(response) {\n    var regex = new RegExp(response.join('|'), 'i');\n    console.log(regex)\n  })\n\n// /weport|admin/i
\n

위 결과값으로 만들어진 정규표현식에 test() 메소드로 badword인지 아닌지 여부를 확인한다.

\n
function test(blackList, regex, string) {\n  console.log(!!blackList.length && regex.test(string));\n}\n\n$.getJSON(\"src/badwords.json\", function() {})\n  .done(function(response) {\n    var regex = new RegExp(response.join(\"|\"), \"i\");\n    test(response, regex, \"admin\");\n  })\n// true\n\n// 만약 string에 다른 값을 주면\n// test(response, regex, \"other value\");\n// false
","fields":{"slug":"/posts/4","tagSlugs":null},"frontmatter":{"date":"2019-11-07","description":"","tags":null,"title":"badwords 필터링"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/posts/4"}}}