0

我正在构建文本编辑器，现在我想更改某些特定单词的用户类型的颜色，例如<html>and <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>

现在我的问题是我不能一次创建多个值，因为当我写<html>然后<body>在 textarea 表单中时，颜色会改变但只有一次。我猜是因为当我输入第一个值时计算机读取值（<html>）它可以工作，但是当我输入第二个值时计算机将它读取为（<html><body>），还有其他方法可以解决它吗？

非常感谢！

4

2 回答 2

0

他们的代码读取方式，类名只会在 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其中，这样您就不必每次想要像以前那样对其进行操作时都在 DOM 中搜索该节点。

于 2013-04-16T18:30:32.783 回答
0

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

像这样：

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

您还需要寻找结束标签，然后像：

document.getElementById('textarea').contains('</html>')
于 2013-04-16T18:32:09.513 回答