2

Подскажите пожалуйста, можно как-нибудь сделать так, чтобы часть текста в textarea поле было заданного цвета, отличного от основного цвета текста?

Знаю, что есть отдельные библиотеки, но для моих целей это избыточно. Вот и думаю, можно ли обойтись малой кровью.

4
  • что такое часть текста в вашем понимании
    – qwabra
    9 апр 2018 в 20:52
  • @qwabra, текстовой блок, текст от start_pos до end_pos. Другими словами, пользователь вводит текст в поле (textarea) и я хочу цветом показать некоторые части введённого текста, на которые стоит обратить внимание (выделить цветом). В сети есть библиотеки похожие на richedit, которые всё это позволят, но их функционал чрезмерно избыточен для моей задачи, вот и подумал, а нет ли возможности обойтись малыми силами.
    – Zhihar
    9 апр 2018 в 22:41
  • можно отредактировать свой вопрос, кнопка править
    – qwabra
    9 апр 2018 в 22:42
  • парсить вводимый текст сами сможете?
    – qwabra
    9 апр 2018 в 22:45

2 ответа 2

3

Стандартные элементы textarea и input не предоставляют возможностей форматирования отдельных подстрок их текстового содержимого, и не могут содержать вложенные строчные элементы (которым можно было бы задать CSS-стили).

Поэтому, данная задача обычно решается созданием имитации поля ввода:

  1. Элементу, предназначенному для вывода (обычно берется div или span), добавляют атрибут contenteditable - он включает возможность прямого редактирования текста содержимого;

  2. CSS-стилями достигают внешнего сходства элемента со стандартным полем ввода - фон, бордер, прокрутка при переполнении, и т.д.. В контексте задачи, это самая легкая часть;

  3. Пишут скрипт, который оборачивает части текстового содержимого в подэлементы (которые, в свою очередь, и оформляются средствами CSS). А также, реализуется поведение элемента, подобное поведению RichText-редактора. И вот это, уже весьма непросто.

Основная сложность - в получении и установке позиции каретки (текстового курсора)... актуальные веб-стандарты не предоставляют удобных средств для этого. Необходимо создавать велосипед, и довольно непростой (с нуля, подобный скрипт за 10 минут не написать).
Следовательно, если цель не в том чтобы создать свое - рациональнее будет использовать одну из множества готовых реализаций такого элемента ввода.


Простой пример подсветки (не "на лету"):

const HL_RULES = [
  { cl: 'str',  re: /("[^"]+")/ }, 
  { cl: 'optr', re: /^(var|let|for|in|of|function|function*|const|do|while|break|continue|if|else|switch|case|default|try|catch|throw|delete|void|yield|yield*|return)$/ }, 
  { cl: 'cnst', re: /(\d+)/ }, 
  { cl: 'brcs', re: /({|})/ }
]; 

let txt = document.querySelector('.custom-textarea'),
    btn = document.getElementById('hl'); 
txt.addEventListener('focus', () => txt.innerHTML = txt.textContent); 
btn.addEventListener('click', () => simpleHighlighter(txt)); 
btn.click(); 

function simpleHighlighter(el) {
  if (el instanceof Event)
    el = this; 
  // если эту функцию назначать обработчиком input, то тут должен быть код сохранения позиции каретки... 
  let words = textToArray(el),
      html  = '', 
      rule; 
  words.forEach(word => {
    if (rule = getHlRuleFor(word))
      html += `<span class="${rule.cl}">${rule.m}</span>`; 
    else
      html += word; 
  });
  el.innerHTML = html; 
  // ..., а тут - код установки каретки обратно на сохраненную позицию
}

function textToArray(el) {
  const RE = /(^|\(+?|[^\w]+?)((?:"[^"]*")|(?:[{}\w]+))(\)+?[\S]+?)?/gmi;   // эта регулярка весьма далека от совершенства :)
  let result = [], 
      match, i; 
  while (match = RE.exec(el.textContent)) {
    for (i = 1; i < match.length; i++) {
      if (match[i])
        result.push(match[i]); 
    }
  }
  return result; 
}

function getHlRuleFor(word) {
  let rule, mr; 
  if (rule = HL_RULES.find(r => mr = word.match(r.re)))
    rule.m = mr[1]; 
  return rule; 
}
* { font: 14px sans-serif; }
html, body { margin: 0; padding: 0; }

.custom-textarea {
  min-width: 40ch; 
  min-height: 7em; height: 50%; 
  padding: 0.1em 0.3ch; margin: 0.5em 0; 
  overflow: auto; resize: both; 
  border: 1px solid #ccc; 
}
.custom-textarea,
.custom-textarea span {
  font-family: monospace; 
}

.str  { color: #e94; }
.optr { color: #47d; font-weight: 500; }
.cnst { color: #4a4; }
.brcs { color: #d44; }
<pre class="custom-textarea" contenteditable="">function foo() {
  let a = "Последовательность чисел:";
  for (var i = 0; i < 42; i++) {
    if (a === 13)
      alert("Попалось 'счастливое' число :)");
    a += " " + i;
  }
  return a; 
}
</pre>
<button id="hl">Подсветить синтаксис</button>

5
  • Фи, нет проверки на корректную вложенность!
    – user207618
    10 апр 2018 в 9:28
  • @Other, в примере вообще отсутствует проверка на вложенность (хоть корректную, хоть не-). Потому что пример соответствует вопросу - он демонстрирует принцип подсветки текста, а не разбор кода. Для анализа кода применяется более сложная логика, чем один проход примитивной регуляркой.
    – yar85
    10 апр 2018 в 9:43
  • Сарказм же! ::)
    – user207618
    10 апр 2018 в 9:49
  • SO выработал у меня рефлекс такой реакции на комменты :))) Кстати, вообще я ожидал что кто-нибудь напишет другое: "фи, оно одинарные кавычки не понимает". Ну, уж я бы точно так написал :D
    – yar85
    10 апр 2018 в 10:08
  • Первое, что пришло на ум сказал.
    – user207618
    10 апр 2018 в 10:23
0

в textarea работать не будет

<textarea rows="7" contenteditable="true">
<h1>qwa</h1>
<p>qwa-qwa</p>
</textarea>

зато можно так

введи @qwa

// -----
var textarea = textarea || document.getElementById('textarea')
let timer = null // id таймера
let t = 1e3 // задержка в миллисекундах
textarea.addEventListener('keyup', foo)
// --
function highlightWords() {
  var original = textarea.textContent
  var replaced = original.replace(/@[a-zA-Z0-9]+/g,
        (username) => "<span class='exists'>" + username + "</span>")
  textarea.innerHTML = replaced
}

function foo(e) {
  clearTimeout(timer)
  if (e.srcElement.textContent) {
    timer = setTimeout(highlightWords, t);
  }
}
div[contenteditable=true] {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 5px;
}

.exists {
  color: blue;
}
<div contenteditable="true" id="textarea">
  <h1>qwa</h1>
  <p>qwa-<b>qwa</b></p>
  <center>center</center>
</div>

данный пример взят и отредактирован отсюда https://stackoverflow.com/a/21420554/4794368

1
  • 1
    Читаю и не могу понять на кой в первом примере textarea атрибут contenteditable? В чем соль? И в чем суть второго варианта?
    – Air
    10 апр 2018 в 4:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.