Как воссоздать тот же эффект подсветки с прикрепленной ссылкой? - PullRequest
Новая
       13

Как воссоздать тот же эффект подсветки с прикрепленной ссылкой?

1 голос
/ 21 сентября 2019

Я работаю над игрой на машинке и пытаюсь имитировать тот же эффект подсветки символов, который нужно напечатать, как в https://www.ratatype.com/typing-test/test/. Однако это оказалось сложнее, чем я себе представлял.

Я создал код, который использует функцию замены, чтобы придать стиль персонажу.Тем не менее, он заменяет только первый экземпляр персонажа и другие экземпляры, он не будет делать то, что должен был сделать. 

const originTextDiv =  document.getElementById('origin-text'); //the div that was supposed to be highlighted.

function spellCheck() {

let textEntered = textArea.value;
    //let textCharEntered = textEntered.split("");
    let originTextMatch = originText.substring(0, textEntered.length);
    // console.log(textEntered);
    var key = event.keyCode || event.charCode;
    originChar = originText.split("");
    //console.log(originTextDiv);
    char = originTextDiv.textContent; 
    //console.log(char);

   console.log(originChar[index]);
     //console.log(textCharEntered);
    if (textEntered == originText) {
        textWrapper.style.borderColor = 'orange';

        $("#myModal").modal();
        stop();
    } else {
        if (textEntered == originTextMatch) {
            textWrapper.style.borderColor = 'green';
            textArea.style.backgroundColor = 'white';
            //  if (!(key == 20 || key == 16 || key == 18 || key == 8 || key == 46 || key ==17 )){
                originTextDiv.innerHTML = char.replace(originChar[index], '<span style="background-color:green;">' +originChar[index]+ '</span>'); //here is the code where it is highlighting
                ++index;
            //  }
            // if (key == 8 || key == 46){
            //     --index;
            // }
        } else {
            textWrapper.style.borderColor = 'red';
            textArea.style.backgroundColor='f23a49';
            originTextDiv.innerHTML = char.replace(originChar[index], '<span style="background-color:red;">' +originChar[index]+ '</span>');
            if (!(key == 8 || key == 46)){
                error++;
            }
        }
    }

}

Я ожидал, что все будет работать так, как задумано, но я этого не сделалзнал, заменяет только заменяет первый экземпляр.Я попытался взглянуть на функции replaceAt для javascript, но когда я попробовал это, replaceAt также заменяет прикрепленный тег span.Может ли кто-нибудь дать мне несколько советов о том, как воссоздать тот же эффект, что и ссылка выше?

...