Saya mencoba melakukan sesuatu yang menarik, misalnya, saya memiliki div dengan contenteditable="true", dan ingin saat menulis mengubah warna kata tertentu yang saya tulis, pada contoh di bawah kata "mengetik", misalnya , warna teks normal adalah putih, dan teks warna yang disorot adalah merah.

<div class="text-area" contenteditable="true">
 start typing here...
</div>

Pengembang ide apa pun, saya ingin sebagai Vanilla Js atau dengan kerangka kerja tidak masalah.

0
asdas12 22 Mei 2021, 11:26

1 menjawab

Jawaban Terbaik

Anda dapat memiliki kamus/objek dengan kata kunci, masing-masing dengan warna yang ditentukan.

let main = document.querySelector('div#main');
let outp = document.querySelector('div#output');

// Colors to replace
const colors = ['red', 'yellow', 'blue', 'green', 'magenta', 'purple', 'black', 'white', 'grey', 'gray', 'cyan', 'orange', 'crimson', 'salmon', 'pink', 'violet', 'turquoise', 'firebrick', 'gainsboro', 'honeydew', 'ivory', 'indigo', 'lavender', 'lime', 'linen', 'maroon'];
const keywords = {
  cool: 2,
  'black cat': 8,
  happy: 1
};

// When user enters something, style it
main.addEventListener('input', function(e)
{
  outp.innerText = this.innerText;

  for (let i = 0; i < Object.keys(keywords).length; i++)
  {
    const keywords_ = Object.keys(keywords);
    const keyword = keywords_[i];
    const color = colors[keywords[keyword]];
    
    outp.innerHTML = outp.innerHTML.replaceAll(new RegExp('(' + keyword + ')', 'gi'), '<span style="color: ' + color + ';">$1</span>');
  }
});

// Style initial values
main.dispatchEvent(new Event('input'));

main.addEventListener('click', outp.focus);

outp.style.top  = main.offsetTop .toString() + 'px';
outp.style.left = main.offsetLeft.toString() + 'px';
div#main
{
  /*position: absolute;
  z-index: 50;*/
  
  /*display: none;*/
  color: transparent;
}

div#main::selection
{
  color: transparent;
  background: transparent;
}

div#main
{
  position: fixed;
  z-index: 50;
}

div#output
{
  border: 1px solid grey;
}

div#main, div#output
{
  outline: none;
  
  min-width: 3cm;
  min-height: 1cm;
  
  max-width: 90vw;
  max-height: 90vh;
  
  padding: 5px;
}
<div id="container">
  <div contenteditable="true" id="main">
    Please enter something cool, like a happy black cat
  </div>

  <div contenteditable="false" id="output">

  </div>
</div>
1
LuisAFK 26 Mei 2021, 04:40