前端输入空格后剩余文本未截断的技术问题求助

在前端打字交互场景中，输入空格键时，页面上的剩余文本（remaining元素）未从内容中移除该空格。相关代码及现象如下：

前端按键处理JS代码 #

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);
    }
};

后端Python消费端代码 #

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,
        }))

现象 #

输入空格键后，前端页面的剩余文本未正确移除该空格。

解决方案 #

1. 替换innerText为textContent #

问题核心原因是**innerText会自动合并连续空格、处理换行符**，导致typed元素的文本长度和实际输入的字符数不一致，进而使得slice计算剩余文本时位置错误。

将代码中所有的innerText替换为textContent，它会保留原始文本的所有空格和字符，确保长度计算准确：

// 修改后相关代码片段
if (key.toLowerCase() === snippet.textContent[typed.textContent.length].toLowerCase()) {
    if(key == " "){            
        console.log('its space !!!!!!');
        typed.textContent +=  ' ';
    }else{
        typed.textContent +=  key.toLowerCase();
    }
    remaining.textContent = snippet.textContent.slice(typed.textContent.length);
    result.textContent = '';
}

// 发送消息部分也同步修改
let message = JSON.stringify({
    'snippet_text':snippet.textContent,
    'typed_text': typed.textContent,
    'remaining_text': remaining.textContent,
});

2. 统一大小写匹配逻辑 #

原代码中直接用输入的key和snippet的字符做全等匹配，若snippet包含大写字母，输入小写字母会匹配失败。修改匹配逻辑，统一转成小写后比较，确保大小写不影响匹配：

// 原判断条件
// if (key === snippet.innerText[typed.innerText.length]) {
// 修改为
if (key.toLowerCase() === snippet.textContent[typed.textContent.length].toLowerCase()) {

3. 后端逻辑无需修改 #

后端已经将文本统一转成小写处理，修改前端后，发送的typed_text和snippet_text会与后端的处理逻辑对齐，不会出现长度不匹配的问题。

内容的提问来源于stack exchange，提问作者Acno_Sama