Как выводить весь текст из textarea что бы найденное слово было подсвеченным красным?

Question

[Дмитрий]

Сделал поиск слова в тексте, подскажите как реализовать чтобы выводился весь текст , а искомое слово было подсвеченно красным?

Comments

[StiflerProger]

У textarea нельзя поменять цвет отдельных слов. Для этого нужно использовать div с атрибутом contenteditable, и там уже манипулировать цветом

[Дмитрий]

StiflerProger, ну так я не хочу менять цвет в текстареа, мне нужно что бы текст выводился весь в h4 ниже и слово найденное было подсвечено

[StiflerProger]

Дмитрий,

слово найденное было подсвечено

это что значит?

[StiflerProger]

Дмитрий, ааа всё понял

[Дмитрий]

StiflerProger, значит то, что если слово найденно, ИЗ текстеаре весь текст шел в H4 НИЖЕ, и уже в этом h4 был подсвеченный спаном найденное слово

Answer 1

[StiflerProger]

Немного поправил твой код ещё, newArr и newArr_lengh глаза резали)

function myPoisk() {
  var outPut = document.getElementById("output");
  var slovo = document.getElementById("input_poisk").value;
  var text = document.getElementById("text_area").value;
  var slova = text.split(' '); // массив исходных слов
  var dopVar = 0;
  slovo = slovo.trim();

  if (slovo == '') {
    alert('Введите слово!')
  } else {
    var i = 0;
    var letterIndex = 0; // индекс текущего символа
    for (i; i < slova.length; i++) {
      if (slovo.toLowerCase() == slova[i].toLowerCase()) {
        //outPut.innerHTML = 'Ваше слово найдено!' + '<br>' + '<br>' + `<span>${newArr[i]}</span>`;
        finish(text, letterIndex, slova[i].length);
        dopVar = 1;
        return false;
      }
      letterIndex += slova[i].length + 1; // +1, потому-что нужно учитывать пробелы
    }
    if (dopVar != 1) {
      alert("Такого слова нет!");
    }
  }
}

// Функция принимает координаты, которые нужно подсветить,
// и выводит в #output
function finish(text, from, size) {

  const answer = text.substr(from, size);
  const _text = text.replace(answer, `<span>${answer}</span>`);

  document.getElementById("output").innerHTML = _text;

}

Comments

[odessit_29]

???

[StiflerProger]

odessit_29, ?

[Сергей delphinpro]

if (slovo.toLowerCase() == words[i].toLowerCase()) {

Категорически протестую
Писали бы уж в одном стиле

if (slovo.toLowerCase() == slova[i].toLowerCase()) {

или

if (word.toLowerCase() == words[i].toLowerCase()) {

[StiflerProger]

Сергей delphinpro, да, тут согласен, сейчас переделаю

Answer 2

[BFSold1er]

мой версия

function myPoisk() {
            var outPut = document.getElementById("output");
            var slovo = document.getElementById("input_poisk").value;
            var text = document.getElementById("text_area").value;
            
            if(!slovo) 
                alert("введите слово")
            else{                
                if (text.indexOf(slovo)) {
                    outPut.innerHTML =text.replace(slovo,'<span style="color:red;">'+slovo+'</span>')
                }
            }
        }

но потом почитал задание в html и уже в лом переписывать =)
переборол лень , все равно не спится

function myPoisk(){
            var slovo = document.getElementById("input_poisk").value;
            var text = document.getElementById("text_area").value;
            var outPut = document.getElementById("output");

            var arr = text.trim().split(' ')
    
            if(!slovo) 
                alert("введите слово")
            else{                
                for(let i=0;i<arr.length;i++)
                    if(arr[i]==slovo.trim()) arr[i]="<span>"+arr[i]+"</span>"
                outPut.innerHTML=arr.join(' ')
            }
        }