我正在制作一个 brainfuck 解释器(brainfuck 是一种由 8 个符号组成的编程语言,这些符号是
,.+-<>[]
)
有没有办法通过 JavaScript 为 HTML 文本区域中各个字符的背景着色?
假设我的文本区域包含“hello world”。我希望能够告诉它为第三个字母着色,这样它就会显示“he*l*lo world”(此处使用粗体来说明颜色,因为我不知道如何在堆栈中包含颜色溢出编辑器)。
有谁知道如何做到这一点,或者是否可能? 任何帮助将不胜感激:=)
我认为 Mukul 在我的脑海中种下了种子,但是这样的东西有用吗:
<textarea id="editor"></textarea>
<div id="render"> </div>
<script>
$(document).ready(function() {
$("#editor").keyup(function() {
var plaincontent = $("#editor").val();
var richcontent = "";
for (var i=0; i<plaincontent.length; i++) {
if (plaincontent.charAt(i) == "[") {
richcontent = richcontent + "<span style='color:#f00'>[</span>";
} else {
richcontent = richcontent + plaincontent.charAt(i);
}
}
$("#render").html(richcontent);
});
});
</script>
它基本上会获取您在文本区域中输入的内容并将其吐出到下面的 div 中,但根据您输入的字符将其包装在跨度中。在上面的演示中,
[
字符将以红色显示。
您必须针对所有不同的法律字符进行调整。
虽然这似乎不可能做到这一点,但我能想到的一个技巧是为每个角色使用多个span,并根据您的选择为它们提供背景颜色。
使用 javascript,您可以使用子选择器访问任何字符。
我找到了另一种方法来做到这一点,虽然@simon的方法仍然有效,但除了将其显示到另一个div之外,我还想突出显示文本区域本身中的文本。
由于你无法直接突出显示textarea中的文本,因此你可以在该textarea后面创建一个div并用它来突出显示文本。
如果您担心滚动并将突出显示与文本绑定,代码会处理它。
详细代码请参考:代码
HTML:
<div class="container">
<div class="backdrop">
<div class="highlights"></div>
</div>
<textarea></textarea>
</div>
JS:
var $container = $('.container');
var $backdrop = $('.backdrop');
var $highlights = $('.highlights');
var $textarea = $('.event-textarea');
function applyHighlights(text) {
text = text
.replace(/\n$/g, '\n\n')
.replace(/[A-Z].*?\b/g, '<mark>$&</mark>');
return text;
}
function handleInput() {
var text = $textarea.val();
var highlightedText = applyHighlights(text);
$highlights.html(highlightedText);
}
function handleScroll() {
var scrollTop = $textarea.scrollTop();
$backdrop.scrollTop(scrollTop);
var scrollLeft = $textarea.scrollLeft();
$backdrop.scrollLeft(scrollLeft);
}
function bindEvents() {
$textarea.on({
'input': handleInput,
'scroll': handleScroll
});
}
bindEvents();
handleInput();
对于 CSS,请参阅链接的代码。