Пробел не вырезается из моего текста во фронтенде

Вот мой внешний JS-код для keyHandler:

let snippet = document.getElementById('snippet'); 
let remaining = document.getElementById('remaining'); 
let typed = document.getElementById('typed');
let result = document.getElementById('result');

const keydownHandler = (event) => {
    let key = event.key;

    if (key.length === 1 && /[a-z .]/i.test(key) ) {
        if (key === snippet.innerText[typed.innerText.length]) {
            if(key == " "){            
                console.log('its space !!!!!!');
                typed.innerText +=  ' ';
            }else{
                typed.innerText +=  key.toLowerCase();
            }
            remaining.innerText = snippet.innerText.slice(typed.innerText.length);
            result.innerText = '';
        } else {
            result.innerText = 'Incorrect key pressed!';
        }
    }

    let message = JSON.stringify({
        'snippet_text':snippet.innerText,
        'typed_text': typed.innerText,
        'remaining_text': remaining.innerText,
    });

    if (socket.readyState === WebSocket.OPEN) {
        console.log('Sending message:', message);
        socket.send(message);
    }
};

Проблема в том, что когда я набираю ' ' (пробел), он не удаляется из оставшегося текста на front-end.

Вот внутренний потребитель:

def receive(self, text_data):
    data = json.loads(text_data)
    typed_text = data.get('typed_text', '').lower()
    snippet_text = data.get('snippet_text', '').lower()
    
    is_correct = typed_text == snippet_text
    if is_correct:
        self.current_snippet_index += 1
        self.player_score += 1
        self.send(json.dumps({
            'is_correct': is_correct,
            'player_score': self.player_score,
        }))
        self.send_new_snippet() #send new snippet with full details
    else:
        remaining_text = snippet_text[len(typed_text):]
        self.send(json.dumps({
            'snippet_text': snippet_text,
            'typed_text': typed_text,
            'remaining_text': remaining_text,
        }))

Вот изображение результатов: results

Поскольку вы используете .innerText, а не .value, я предположу, что вы используете div или span для своих элементов. В этом случае ваша проблема заключается в том, что .innerText возвращает содержимое рендеринга текста из DOM (который удаляет пробельные символы).

Исправление заключается в том, чтобы просто использовать .innerHTML вместо .innerText. Или, конечно, вы можете использовать элементы ввода и их свойства .value.

Запустите фрагмент кода, чтобы убедиться, что он работает:

let snippet = document.getElementById('snippet');
let remaining = document.getElementById('remaining');
let typed = document.getElementById('typed');
let result = document.getElementById('result');


const keydownHandler = (event) => {
    let key = event.key;

    if (key.length === 1 && /[a-z .]/i.test(key) ) {
        if (key === snippet.innerHTML[typed.innerHTML.length]) {
            if(key == " "){
                console.log('its space !!!!!!');
                typed.innerHTML +=  ' ';
            }else{
                typed.innerHTML +=  key.toLowerCase();
            }
            remaining.innerHTML = snippet.innerHTML.slice(typed.innerHTML.length);
            result.innerHTML = '';
        } else {
            result.innerHTML = 'Incorrect key pressed!';
        }
    }

    let message = JSON.stringify({
        'snippet_text':snippet.innerHTML,
        'typed_text': typed.innerHTML,
        'remaining_text': remaining.innerHTML,
    });

    // if (socket.readyState === WebSocket.OPEN) {
    //     console.log('Sending message:', message);
    //     socket.send(message);
    // }

    console.log( message )
};

document.addEventListener( "keydown", keydownHandler )
label {
  display: block;
  margin-bottom: 1rem;
}

label span {
  display:  inline-block;
  border: solid 1px orange;
  height: 1.2rem;
  width: 15rem;
}
        <label for="snippet">Snippet <span id="snippet">Test for spaces</span> </label>
        <label for="remaining">Remaining <span id="remaining"></span> </label>
        <label for="typed">Typed <span id="typed" contentEditable="true"></span> </label>
        <label for="result">Result <span id="result"></span> </label>

Вернуться на верх