Question

我正在构建文本编辑器，现在我想更改某些特定单词的用户类型颜色，例如<html>和<body>。

CSS：

.html{
    color: rgba(0, 91, 255, 0.52);
}
.body{
    color: rgba(255, 1, 1, 0.59);
}

的Javascript

function colorCode() {
    if (document.getElementById('textarea').value == '<html>') {
        document.getElementById('textarea').value == '<html>';
        document.getElementById('textarea').className = 'html';
    }
    if (document.getElementById('textarea').value == '<body>') {
        document.getElementById('textarea').value == '<body>';
        document.getElementById('textarea').className = 'body';
    }
}

HTML：

<textarea class="lined" name="textarea" rows="10" cols="60" id="textarea" onkeyup="outPost(id); colorCode();"></textarea>

现在我的问题是我无法一次创建多个值，因为当我在textarea表单中写<html>然后<body>时，颜色会发生变化但只有一次。我猜是因为当我输入第一个值（<html>）时计算机读取值，但是当我键入第二个计算机时将其读作（<html><body>），是否有其他方法可以修复它？

非常感谢！

Answer 1

他们对您的代码进行编码，只有当textarea内容与<html>或<body>完全匹配时，才会更改类名。如果文本区域只需要包含这些值以触发颜色更改，那么您似乎可能需要子字符串匹配。所以你可能会这样重写：

function colorCode() {
    var textArea = document.getElementById('textarea');

    if (textArea.value.search('<html>') > -1) {
        textArea.className = 'html';
    }
    if (textArea.value.search('<body>') > -1) {
        textArea.className = 'body';
    }
}

注意我还将测试区域节点存储到textArea，这样您就不必像每次想要对该节点进行操作一样搜索该节点。

Answer 2

我认为您应该使用contains方法进行比较，而不是比较整个textareas内容的值。

像这样：

document.getElementById('textarea').contains('<html>')

您还需要查找结束标记，如：

document.getElementById('textarea').contains('</html>')

Textarea颜色值

2 个答案: