javascript - div中的彩色字母

Question

我创建了一个回文检查器。我想更进一步，在检查时显示正在比较的字母。

HTML:

<p id="typing"></p>
<input type="text" id="textBox" onkeyup="pal(this.value);"  value="" />
<div id="response"></div>   
<hr>
<div id="palindromeRun"></div>

JS:

为此，我运行递归检查...然后如果它是回文，我运行 colorLetters()，我试图用绿色突出显示每个字母检查。现在它只是用第一个字母重写 palindromeRun 的 HTML。我知道这是因为我重置其 HTML 的方式。

我不知道如何只获取第一个和最后一个字母，只更改这些字母的 css，然后在下一个 setTimeout 循环中递增 i 和 j。

var timeout2 = null;

function pal (input) {
    var str = input.replace(/\s/g, '');
    var str2 = str.replace(/\W/, '');

    if (checkPal(str2, 0, str2.length-1)) {
        $("#textBox").css({"color" : "green"});
        $("#response").html(input + " is a palindrome");
        $("#palindromeRun").html(input);
        colorLetters(str2, 0, str2.length-1);
    }
    else {
        $("#textBox").css({"color" : "red"});
        $("#response").html(input + " is not a palindrome");
    }
    if (input.length <= 0) {
        $("#response").html("");
        $("#textBox").css({"color" : "black"});
    }

}

function checkPal (input, i, j) {
    if (input.length <= 1) {
        return false;
    }
    if (i === j || ((j-i) == 1 && input.charAt(i) === input.charAt(j))) {
        return true;
    }
    else {
        if (input.charAt(i).toLowerCase() === input.charAt(j).toLowerCase()) {
            return checkPal(input, ++i, --j);
        }
        else {
            return false;
        }
    }                             
}

function colorLetters(myinput, i, j) {
    if (timeout2 == null) {
        timeout2 = setTimeout(function () {
            console.log("called");
            var firstLetter = $("#palindromeRun").html(myinput.charAt(i))
            var secondLetter = $("#palindromeRun").html(myinput.charAt(j))

            $(firstLetter).css({"color" : "red"});
            $(secondLetter).css({"color" : "green"});

            i++;
            j++;
            timeout2=null;
        }, 1000);
    }
}

次要:如果可能的话，我只想让它在用户输入时为字母着色......我意识到这将需要对每个字母进行 setTimeout keyup，但也不知道怎么写。

Answer 1

要使字母的样式与其周围的字符不同，您需要将其包装在自己的元素中，通常是 span 元素。比照。 Is it possible to apply different styles to different letters in word?

您不能对构成 input 元素值的字母执行此操作，因为该值被浏览器视为纯文本。但是，如果您使用用户可编辑的元素(带有 contentEditable 属性)，您可以将每个字符放在一个内部元素中，不过您需要实现一个小型编辑器或使用一个合适的库来执行此操作。