Как подсветить текст, после его вывода из input

Question

Всем привет

Подскажите, пожалуйста, как подсветить текст выведенный из инпута на страницу по нажатию кнопки. К примеру, выделить желтым если текст более 1го символа и выделить красным слова со спецсимволами ($#@ и т.д.)?

document.querySelector("button").onclick = myClick;

function myClick() {
    let a = document.querySelector(".myInput").value;
    document.querySelector(".textOutput").innerHTML = a;
    document.querySelector(".myInput").value = '';
}

Answer 1

document.querySelector("button").onclick = myClick;

function myClick() {
    let a = document.querySelector(".myInput").value;
    document.querySelector(".textOutput").innerHTML = prepare(a);
    document.querySelector(".myInput").value = '';
}

function prepare(text){

  return text
    // разделяем текст на слова
    .split(' ')
    .map(word => {
      // ничего не делаем если попался множественный пробел 
      if(word.length === 0)
        return word;
        
      let classes = [];
      // проверяем слово на спецсимволы
      if(word.match(/[^A-Za-zА-Яа-я0-9]/))
        // выдаём соответсвующий класс
        classes.push('special-chars');
      
      // теперь на числа
      if(word.match(/[0-9]/))
        classes.push('numbers');
      
      // и на всякий случай на длину
      if(word.length === 1)
        classes.push('one-chr');
      
      // делаем обёртку, к которой сможем применить стили
      classes = classes.join(' ');
      return `<span class="${classes}">${word}</span>`
    }).join(' ');

}

.numbers{
  color:red;
}

.special-chars{
  text-decoration: line-through;
}

.one-chr{
  text-decoration: underline;
}

<input class="myInput" value="s0me test  val#e a">
<button>button</button>
<div class="textOutput"></div>

БЛОГ НА HUSL

Как подсветить текст, после его вывода из input

Ответы (1 шт):