javascript - 如何用字母替换下划线 React Hook

Question

我试图构建一个吊人游戏，为了制作这个游戏，该单词已被下划线替换，例如 (hello) ==> _ _ _ _ _。因此，每次玩家单击 keyButton 时，它都应该用匹配的字母替换下划线。

但要记住的一件重要的事情是，它不应该替换下划线，例如当用户单击 e --> _ e _ _ _ 然后单击 l --> _ _ l l _。您会看到匹配的字母 e 被下划线替换，这就是我的代码中的情况。神奇的事情发生在 showMatchedLetter 函数

import React, { useState, useEffect } from 'react';
import { fetchButton } from '../actions';
import axios from 'axios';
import 'babel-polyfill';

const App = () => {
    const [word, setWord] = useState([]);
    const [underscore, setUnderscore] = useState([]);
    const [data, setData] = useState([]);

    useEffect(() => {
        const runEffect = async () => {
            const result = await axios('src/api/api.js');
            setData(result.data)
        }
        runEffect();
    }, []);

    const randomWord = () => {
        const chosenWord = data[Math.floor(Math.random() * data.length)];
        replaceLetter(chosenWord.word);
    }

    const replaceLetter = (string) => {
      
        let getString = string;
        setWord(getString);
        let stringToUnderScore = getString.replace(/[a-z]/gi, '_');
        setUnderscore(stringToUnderScore);
    }

    useEffect(() => {
        const checkLetter = (event) => {
            if(event.keyCode >= 65 && event.keyCode <= 90) {
                checkMatchLetter(word, String.fromCharCode(event.keyCode).toLowerCase());
            }
        };

        document.addEventListener('keydown', checkLetter);
        return () => {
            document.removeEventListener('keydown', checkLetter);
        }
    }, [word]);

    const checkMatchLetter = (word, keyButton) => {
        if(word == undefined) {
            return;
        } else {
            for(let i = 0; i < word.length; i++) {
                if(word[i] == keyButton) {
                    let index = i;
                    showMatchedLetter(word[i], index);
                }
            }
        }
    }

    const showMatchedLetter = (letter, index) => {
        console.log(letter, index);
        let string = word;
        string = setCharAt(string, index, letter);
        console.log(string)
    }

    const setCharAt = (string, index, letter) => {
        if(index > string.length - 1) return string;
        console.log(string)
        return underscore.substr(0, index) + letter + underscore.substr(index + 1); 
        
    }

    return (
        <div>
            <p>{word}</p>
            <p>{underscore}</p>
            <button onClick={randomWord}></button>
        </div>
    )
}

export default App;

Answer 1

解决这个问题的一种方法是只保留已经被猜到的字母的运行列表。

然后只需用下划线替换任何未猜出的字母即可在每次猜出新字母时获取“隐藏”单词。

下面的 revealOnly 函数可以按照您想要的任何方式实现，但重要的是它需要完整的单词字符串和要替换的字母列表，然后返回一个省略任何字母的新字符串。未猜到的字母。

const phrase = 'Hello World'

function revealOnly(str, guessed=[]){
  const regExpr = new RegExp(`[^${guessed.join("")}\\s]`, 'ig')
  return str.replace(regExpr, '_')
}

console.log(revealOnly(phrase, [])) // no letters guessed

console.log(revealOnly(phrase, ['e', 'l'])) // some letters guessed

以下是 React 中的一个工作演示，用于演示如何使用它:

const { useState } = React

const App = () => {
  const [phrase, setPhrase] = useState('Hello World')
  const [guessed, setGuessed] = useState([])

  function onGuessLetter(letter){
    if(guessed.includes(letter)) return
    // add letter to guessed array
    setGuessed(prev => [...prev, letter])
  }

  function revealOnly(str, guessed=[]){
    const regExpr = new RegExp(`[^${guessed.join("")}\\s]`, 'ig')
    return str.replace(regExpr, '_')
  }

  return (
    <div>
      <div> {revealOnly(phrase, guessed)} </div>
      <LetterPicker onPick={onGuessLetter} />
    </div>
  )
}

const LetterPicker = (props)=>{
  const letters = []
  for(let i = 0; i < 26; i++){
    letters.push(String.fromCharCode(97+i))
  }
  return (
   <div className={'letter-picker'}>
    {letters.map(l => <div onClick={()=>props.onPick(l)}>{l}</div>)}
   </div>
  )
}

ReactDOM.render(<App/>, document.querySelector("#root"))

.letter-picker > div {
 display : inline-block;
 cursor : pointer;
 padding : 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

保留猜测的字母的运行列表对于检查单词是否已完全显示也很有用(尽管您也可以检查是否存在任何_)。同样，在传统的刽子手方式中，您也可以在某处显示以前的字母。

编辑:

How do I check if the entire word is guessed.

只需检查显示的单词是否等于原始短语。

const curr = revealOnly(phrase, ['h','e','l','w','o','r', 'd']
const isGuessed = curr === phrase

const { useState } = React

const App = () => {
  const [phrase, setPhrase] = useState('Hello World')
  const [guessed, setGuessed] = useState([])

  function onGuessLetter(letter){
    if(guessed.includes(letter)) return
    // add letter to guessed array
    setGuessed(prev => [...prev, letter])
  }

  function revealOnly(str, guessed=[]){
    const regExpr = new RegExp(`[^${guessed.join("")}\\s]`, 'ig')
    return str.replace(regExpr, '_')
  }
  
  const curr = revealOnly(phrase, guessed)
  const isGuessed = curr === phrase

  return (
    <div>
      <div> {curr} </div>
      <div>Gussed: {isGuessed.toString()} </div>
      <LetterPicker onPick={onGuessLetter} />
    </div>
  )
}

const LetterPicker = (props)=>{
  const letters = []
  for(let i = 0; i < 26; i++){
    letters.push(String.fromCharCode(97+i))
  }
  return (
   <div className={'letter-picker'}>
    {letters.map(l => <div onClick={()=>props.onPick(l)}>{l}</div>)}
   </div>
  )
}

ReactDOM.render(<App/>, document.querySelector("#root"))

.letter-picker > div {
 display : inline-block;
 cursor : pointer;
 padding : 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>