我正在构建文本编辑器，现在我想更改某些特定单词的用户类型的颜色，例如 <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>
现在我的问题是我不能一次创建多个值，因为当我写 <html> 时然后 <body>在 textarea 表单中，颜色只改变一次。
我猜是因为当我输入第一个值 (<html>) 时计算机读取值它工作，但是当我输入第二个值时计算机读取它作为 (<html><body>)，有没有另一种方法来修复它？
非常感谢!
最佳答案
按照您的代码读取方式，只有当文本区域内容完全匹配 <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 中搜索该节点。
关于javascript - 文本区域颜色值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16044390/