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

258

27 сентября 2021, 02:30

Сделал вот такой маленький пример:

var div = document.querySelector('div'); 
var button = document.querySelector('button'); 
 
button.addEventListener('click', changeFontColor); 
function changeFontColor() { 
  document.execCommand('foreColor', false, "green"); 
} 
 
div.addEventListener('keydown', setDefaultFontColor); 
function setDefaultFontColor() { 
  document.execCommand('foreColor', false, "red"); 
}

div { 
  font-size: 2rem; 
  color: red; 
  font-family: sans-serif; 
}

<div contenteditable="true">Lorem, ipsum dolor</div> 
<button>CLICK</button>

Так как тема для меня новая, мне совсем непонятно, это удачный пример или нет (сомнения с событием keydown)? Ещё заметил, что если в setDefaultFontColor цвет меняется на такой же, как и в css, то новый текст не оборачивается в тег <font></font>... что мне собственно и нужно, но непонятно почему...это какие-то оптимизации со стороны браузера?

Потом стало интересно, как это сделать "вручную", написал вот такое:

var div = document.querySelector('div'); 
var button = document.querySelector('button'); 
 
button.addEventListener('click', changeText); 
 
function changeText() { 
  var selected = window.getSelection().toString(); 
  var currentText = div.innerHTML; 
  currentText = currentText.replace(new RegExp(selected, 'g'), `<span>${selected}</span>`); 
 
  div.innerHTML = currentText; 
}

div { 
  font-size: 2rem; 
  color: red; 
  font-family: sans-serif; 
} 
 
span { 
  color: green; 
}

<div contenteditable="true">Lorem, ipsum dolor</div> 
<button>CLICK</button>

но теперь новая проблема: как "выйти" из тега span после изменения цвета и продолжить писать в div ?

Answer 1

Сделал на данный момент вот так:

var div = document.querySelector('div'); 
var button = document.querySelector('button'); 
 
button.addEventListener('click', changeText); 
 
function changeText() { 
  var selected = window.getSelection().toString().replace(/[^a-zA-Zа-яА-Я0-9-\s]/g, ""); 
  if (selected.length <= 1) return; 
 
  var currentText = div.innerHTML; 
  var newText = currentText.replace(new RegExp(selected, 'g'), `<span>${selected}</span>`); 
 
  div.innerHTML = newText; 
} 
 
div.addEventListener('keypress', appendChar); 
 
function appendChar(e) { 
  e.preventDefault(); 
 
  var char; 
  var key = e.keyCode; 
 
  switch (key) { 
    case 32: 
      char = '&nbsp;'; 
      break; 
    case 13: 
      char = '\n'; // ????????????? 
      break; 
    default: 
      char = String.fromCharCode(key); 
  } 
 
  document.execCommand("insertHTML", null, char); 
}

div { 
  font-size: 2rem; 
  color: red; 
  font-family: sans-serif; 
} 
 
span { 
  color: green; 
}

<div contenteditable="true">Lorem, ipsum dolor</div> 
<button>CLICK</button>

Может кому-нибудь пригодится.

Но это какой-то мега-костыль и c переносом строки я так и не разобрался.

А, и если вам нужно изменять только выбранное слово, а не выбранное + все его копии, то вот пример https://ru.stackoverflow.com/a/947505/355286

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

x509: certificate signed by unknown authority на Golang

Имеется js код такого типа, который делает запрос к апи и получает от него ответ

305

javascript

Не переходит по ссылке

есть тег:

javascript

Нажатие только определенный div

Подскажите пожалуйста, есть такой код

176

javascript

Как удалять невидимые символы в CKeditor?

Доброе время суток, форумчане!

140