Как подсветить или изменить стиль некоторых букв в строке

#javascript #html #css #jquery

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

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

1235aa2323aa


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

Ответы

Ответ 1

Такой костыль придумался... поставить поверх вашего элемента прозрачный 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, '$1')
}
.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;
}

  1235aa2323aa
  1235aa2323aa



Ответ 2

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

document.querySelector('.input_text').innerHTML = document.querySelector('.input_text').innerHTML.replace(/\d/g,
'$&')


Ответ 3

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



$(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 = `${String.fromCharCode(kCode)}`;
        } else {
          newEl =`${String.fromCharCode(kCode)}`;
        }
    if(kCode === 8) {
      $('span').last().remove();
    } else {
      parElem.html(parElem.html() + newEl)
    }
    
  });
});
.num {
  color: red;
}
.str {
  color: blue;
}


  text





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