ReactJS를 사용한 비속어 필터

하셉 아흐메드

다음 코드를 고려하십시오.

/* eslint-disable array-callback-return */
/* eslint-disable no-unused-expressions */
import React from 'react'
import './App.css';


let swear = [
'arse',
'ass',
'asshole',
'bastard',
'bitch',
'bollocks',
'bugger',
'bullshit',
'crap',
'damn',
'frigger',
]

const App = () => {
  let [count , setCount] = React.useState(0)
  let [approval , setApproval] = React.useState(false)
  let [text , setText] = React.useState('')


  
  const bogusCheck = (text) =>{
    swear.map(word => {
      text.includes(word) === true ? (console.log('Bad word found') ): (console.log('No bad word found')); 
    })
  }

  return (
    <div className="App">
      <h1>Profanity Checker</h1>
      <p>Enter a sentence below and click the button below:</p>
      <textarea cols="30" rows='10' value={text} onChange={e => setText(e.target.value) } />
      <br />
      <button onClick={() => bogusCheck(text)} >Profanity Check</button>
    </div>

  );
}
export default App;

이것은 욕설 필터로 간주됩니다. 이론은 텍스트 영역에서 입력을받은 다음 .map () 및 .includes () 함수를 사용하여 비교한다는 것입니다.

swear는 나쁜 단어를 포함하는 배열입니다.

따라서 맵은 욕설 배열을 반복하고 각 단어를 선택하여 텍스트에 포함되어 있는지 확인합니다. true를 반환하면 콘솔이 기록합니다 (잘못된 단어 발견). 그렇지 않은 경우 기록 (불량 어를 찾을 수 없음)

문제는 버튼을 클릭하면 필요하지 않은 결과의 13 배를 기록한 다음 필요한 결과를 한 번 기록하고 더 많은 비 필수 결과를 기록한다는 것입니다. 아래 이미지를 참조하십시오.

이것에 대한 전환 솔루션은 무엇입니까 ??

nodir.dev

코드를 약간 변경하십시오.

const bogusCheck = (text) =>{
    const foundSwears = swear.filter(word => text.includes(word));
    if(foundSwears.length){
        console.log('Bad word found');
    } else {
        console.log('No bad word found');
    }
})

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다debugcn@gmail.com 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

NAV 웹 서비스를 사용한 dataGridView 행 필터링

분류에서Dev

AngularJS를 사용한 날짜 표시-필터 비용은 얼마입니까?

분류에서Dev

사용자에게 속한 블로그를 찾고 필터링하려면 어떻게해야합니까?

분류에서Dev

지시어 속성에 필터를 사용하면 $ digest주기에서 무한 루프가 발생합니다.

분류에서Dev

간단한 Odata 필터를 사용하여 목록의 값을 어떻게 비교합니까?

분류에서Dev

lodash를 사용한 재귀 필터

분류에서Dev

<a> 태그를 사용한 필터링

분류에서Dev

필터를 사용한 DyanmoDB 스캔

분류에서Dev

OR 필터를 사용한 집계

분류에서Dev

jQuery를 사용한 다중 필터

분류에서Dev

ColorMatrixColorFilter를 사용한 이미지 필터

분류에서Dev

distinct ()를 사용한 Django order_by () 필터

분류에서Dev

Linq를 사용한 동적 필터링

분류에서Dev

JSF를 사용한 서블릿 필터

분류에서Dev

XPATH를 사용한 JMS 필터링

분류에서Dev

JDBC를 사용한 날짜 필터링

분류에서Dev

CUDA를 사용한 평균 필터

분류에서Dev

VBA를 사용한 날짜 필터

분류에서Dev

% in %를 사용한 Data.frame 필터링

분류에서Dev

사용 가능한 필터를 나열하려면 어떻게합니까

분류에서Dev

사용 가능한 Windows 검색 필터를 어떻게 볼 수 있습니까?

분류에서Dev

사용 가능한 Windows 검색 필터를 어떻게 볼 수 있습니까?

분류에서Dev

MAPI를 사용한 Outlook 사용자 지정 필드 필터링

분류에서Dev

USB 3.0 to USB-C 어댑터를 사용한 전송 속도

분류에서Dev

discord.py를 사용하여 비속어를 필터링하면 다른 명령이 작동하지 않습니다.

분류에서Dev

FFMPEG에서 비디오 정규화 필터를 어떻게 사용합니까?

분류에서Dev

포함 필터를 사용한 yadcf 스마트 필터링

분류에서Dev

Python에서 람다 + 필터를 사용한 목록 필터링

분류에서Dev

Mongoose는 $ and를 사용하여 동일한 속성 두 필터를 적용합니다.

Related 관련 기사

  1. 1

    NAV 웹 서비스를 사용한 dataGridView 행 필터링

  2. 2

    AngularJS를 사용한 날짜 표시-필터 비용은 얼마입니까?

  3. 3

    사용자에게 속한 블로그를 찾고 필터링하려면 어떻게해야합니까?

  4. 4

    지시어 속성에 필터를 사용하면 $ digest주기에서 무한 루프가 발생합니다.

  5. 5

    간단한 Odata 필터를 사용하여 목록의 값을 어떻게 비교합니까?

  6. 6

    lodash를 사용한 재귀 필터

  7. 7

    <a> 태그를 사용한 필터링

  8. 8

    필터를 사용한 DyanmoDB 스캔

  9. 9

    OR 필터를 사용한 집계

  10. 10

    jQuery를 사용한 다중 필터

  11. 11

    ColorMatrixColorFilter를 사용한 이미지 필터

  12. 12

    distinct ()를 사용한 Django order_by () 필터

  13. 13

    Linq를 사용한 동적 필터링

  14. 14

    JSF를 사용한 서블릿 필터

  15. 15

    XPATH를 사용한 JMS 필터링

  16. 16

    JDBC를 사용한 날짜 필터링

  17. 17

    CUDA를 사용한 평균 필터

  18. 18

    VBA를 사용한 날짜 필터

  19. 19

    % in %를 사용한 Data.frame 필터링

  20. 20

    사용 가능한 필터를 나열하려면 어떻게합니까

  21. 21

    사용 가능한 Windows 검색 필터를 어떻게 볼 수 있습니까?

  22. 22

    사용 가능한 Windows 검색 필터를 어떻게 볼 수 있습니까?

  23. 23

    MAPI를 사용한 Outlook 사용자 지정 필드 필터링

  24. 24

    USB 3.0 to USB-C 어댑터를 사용한 전송 속도

  25. 25

    discord.py를 사용하여 비속어를 필터링하면 다른 명령이 작동하지 않습니다.

  26. 26

    FFMPEG에서 비디오 정규화 필터를 어떻게 사용합니까?

  27. 27

    포함 필터를 사용한 yadcf 스마트 필터링

  28. 28

    Python에서 람다 + 필터를 사용한 목록 필터링

  29. 29

    Mongoose는 $ and를 사용하여 동일한 속성 두 필터를 적용합니다.

뜨겁다태그

보관