HTML: изменить цвет фона отдельных символов в текстовой области?

Я делаю интерпретатор brainfuck (brainfuck — это язык программирования, состоящий из 8 символов, это ,.+-<>[] )

Есть ли способ покрасить фон отдельных символов в текстовой области HTML с помощью JavaScript?

Допустим, моя текстовая область содержит «hello world». Я хотел бы указать ему раскрасить 3-ю букву, чтобы она показывала "he*l*lo world" (используя жирный шрифт здесь, чтобы проиллюстрировать цвет, потому что я не знаю, как включить цвета в редакторе Stack Overflow).

Кто-нибудь знает, как это сделать, и возможно ли это вообще? Любая помощь будет принята с благодарностью :=)


javascript html interpreter brainfuck
person mort    schedule 01.03.2013    source источник
comment
Нет, это невозможно. Вы должны сделать это по-другому, например. используя contenteditable div и заключая каждый символ в span. Вы ищете что-то вроде CodeMirror: codemirror.net. Я не совсем уверен, как они это делают, но выглядит хорошо, ИМО.   -  person Felix Kling    schedule 01.03.2013
comment
Вам нужно будет написать свой собственный редактор типов wysiwyg для текстовых областей, а затем вы сможете использовать регулярное выражение или что-то еще, чтобы обернуть указанные символы в интервалы и дать им класс для их окраски.   -  person Pete    schedule 01.03.2013
comment
При этом сами персонажи окрашены. Я хочу покрасить фон отдельных персонажей, но, может быть, это тот же процесс?   -  person mort    schedule 01.03.2013

Ответы (2)


arrow_upward
3
arrow_downward

Я думаю, что Мукул посеял семена в моей голове, но было бы полезно что-то вроде этого:

<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 ниже, но оборачивает его в интервалы в зависимости от того, какой символ вы вводите. В приведенной выше демонстрации символ [ будет представлен красным цветом.

Вам придется настроить его для всех различных юридических символов.

person Simon Adcock    schedule 01.03.2013
comment
Это довольно аккуратно, но я пытаюсь не раскрашивать один тип символов. Мне нужно, чтобы текстовое поле окрасило, например, 5-й символ. Так что только один персонаж, и не зависит от того, что это за персонаж. Как вы думаете, было бы возможно настроить ваш код, чтобы сделать это? - person mort; 01.03.2013
comment
Вероятно, нужно было указать это некоторое время назад, но я просто показываю, какой символ в данный момент читается при выполнении программы, в качестве помощи при отладке :b Большое спасибо за вашу помощь. Я постараюсь посмотреть, получится ли у меня. Если у меня все получится, я обязательно отмечу вас :) - person mort; 01.03.2013
comment
Вау, это звучит как отличный проект! Я вижу, как вы можете изменить код, чтобы заставить его работать, но в любом случае это будет отличный опыт изучения JQuery :) Большое спасибо за потенциальный кредит и удачи! - person Simon Adcock; 01.03.2013

arrow_upward
0
arrow_downward

Хотя это кажется невозможным, но я могу придумать один трюк — использовать несколько span для каждого символа и задать им цвет фона по вашему выбору.

С помощью javascript вы можете получить доступ к любому символу с помощью дочерних селекторов.

person Mukul Kapoor    schedule 01.03.2013
comment
Ум уточнять? Я не профессионал в HTML: b - person mort; 01.03.2013