Работает визуальный редактор на JS?

272

20 февраля 2017, 19:15

Как здесь на стаке сделано или многих форумах. Пишу текст, потом выделяю одно слово и нажимаю кнопку B или добавление ссылки и жирным или ссылкой становится именно это слово есть ответ на вопрос как поймать выделенное слово: http://stackoverflow.com/questions/275761/how-to-get-selected-text-from-textbox-control-with-javascript

Но как потом именно его окружить тегами b например. Заменой регуляркой? А если он выделил слово "так" а в тексте 3 слова "так" в разных местах?

Answer 1

Нужно просто обернуть выделенную строку и поместить её между строк, которые находятся до выделения и после.

Пример:

function wrapFn(str) {
  return '<b>' + str + '</b>'
}
function replaceSelection(el) {
    if (el.selectionStart === el.selectionEnd) return;
    var text = el.value;
    var start = el.selectionStart;
    var end = el.selectionEnd;
    var wrappedValue = wrapFn( text.substring(start, end) );
    el.value = text.substring(0, start) + wrappedValue + text.substring(end);
}
var el = document.querySelector('#myTextarea');
replaceSelection(el);