3

Как сделать подобие подсветки синтаксиса?

На входе есть строка 1235aa2323aa

<span class="input_text" contenteditable="true">1235aa2323aa</span>

На выходе должно получится что-то вроде 1235aa2323aa, где цифры и буквы имеют разные css стили которые применяются при вводе символов.

2
  • А это небольшой такой кусок текста или планируете что-то масштабов JsFiddle ?) 31 авг 2019 в 18:58
  • Это буквально строка из 6-7 символов... 31 авг 2019 в 18:59

3 ответа 3

3

Такой костыль придумался... поставить поверх вашего элемента прозрачный textarea (input), ровно с теми же размерами и шрифтом, а при вводе текста - обновлять его в span. Проблема в том, что caret-color плохо поддерживается браузерами.

let inp = document.querySelector('.input_text');
let invis = document.querySelector('.invis');

inp.innerHTML = color(inp.innerText);

invis.addEventListener('input', function() {
  inp.innerHTML = color(this.value);
  this.style.height = (this.scrollHeight + 2) + 'px';
});

function color(txt) {
  return txt.replace(/(\d+)/g, '<span class="number">$1</span>')
}
.input_text {
  display: inline-block;
  width: 200px;
  background-color: #22282b;
  padding: 5px;
  box-sizing: border-box;
  color: #f7ed7e;
  font-size: 18px;
  font-family: 'Helvetica';
}

.number {
  color: #ed593c;
}

.invis {
  position: absolute;
  left: 0;
  width: 200px;
  padding: 4px;
  font-size: 18px;
  font-family: 'Helvetica';
  box-sizing: border-box;
  background-color: transparent;
  color: transparent;
  caret-color: #f7ed7e;
  outline: none;
  border: 1px solid red;
  resize: none;
  overflow: hidden;
}
<div style="position: relative">
  <span class="input_text" spellcheck="false" contenteditable>1235aa2323aa</span>
  <textarea class="invis" spellcheck="false">1235aa2323aa</textarea>
</div>

2

Через replace искать что подсветить и делать обертку с нужными стилями https://jsfiddle.net/1jm2cfqz/

document.querySelector('.input_text').innerHTML = document.querySelector('.input_text').innerHTML.replace(/\d/g, '<b>$&</b>')
4
  • Да, только сразу <b class="my">$&</b>, чтобы потом css стили прописать 1 сен 2019 в 7:18
  • @Чипекве contenteditable намекает, что оно должно работать и в процессе печати. А обновлять innerHTML и держать курсор на месте - задачка муторная. В этом и сложность)) 1 сен 2019 в 8:53
  • Так используйте input с onChange, в чём проблема? 1 сен 2019 в 10:01
  • @AlexanderP Текст внутри input нельзя стилизовать кусками... 1 сен 2019 в 11:18
0

Обернул каждый символ в тэг

$(document).ready(function() {
  $(".my-text").keydown(function(event) {
    const parElem = $(".my-text")
    event.preventDefault();
    let newEl;
    const kCode = event.keyCode;
    if (kCode >= 48 && kCode <= 57) {
        newEl = `<span class="num">${String.fromCharCode(kCode)}</span>`;
        } else {
          newEl =`<span class="str">${String.fromCharCode(kCode)}</span>`;
        }
    if(kCode === 8) {
      $('span').last().remove();
    } else {
      parElem.html(parElem.html() + newEl)
    }
    
  });
});
.num {
  color: red;
}
.str {
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="my-text" contenteditable="true">
  text
</p>

Нужно доработать поведение для других keyCode-ов, но вроде-бы работает

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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