HTML：更改文本区域中单个字符的背景颜色？

Question

我正在制作一个 brainfuck 解释器（brainfuck 是一种由 8 个符号组成的编程语言，这些符号是

,.+-<>[]

）

有没有办法通过 JavaScript 为 HTML 文本区域中各个字符的背景着色？

假设我的文本区域包含“hello world”。我希望能够告诉它为第三个字母着色，这样它就会显示“he*l*lo world”（此处使用粗体来说明颜色，因为我不知道如何在堆栈中包含颜色溢出编辑器）。

有谁知道如何做到这一点，或者是否可能？ 任何帮助将不胜感激:=)

Answer 1

我认为 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 中，但根据您输入的字符将其包装在跨度中。在上面的演示中，

[

字符将以红色显示。

您必须针对所有不同的法律字符进行调整。

Answer 2

虽然这似乎不可能做到这一点，但我能想到的一个技巧是为每个角色使用多个span，并根据您的选择为它们提供背景颜色。

使用 javascript，您可以使用子选择器访问任何字符。

Answer 3

我找到了另一种方法来做到这一点，虽然@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，请参阅链接的代码。