Как добавлять и удалять тэги вокруг выделенного текста?

Question

Я хочу обработать строку внутри textarea получить выделенный текст и добавить вокруг него тэг элемента например

$('#click_but').click(function(){
  var el = $('.text_area')
  var control = el[0];
  var text = $(control).val();
  if (control.selectionStart != control.selectionEnd) {
    val = text.substring(control.selectionStart, control.selectionEnd);
    console.log([el.val(),val])
  }
  return false;
});

Текст для теста

Это просто текст

[Выделенный текст]Ссылка[/Выделенный текст]

текст есть текст

Текст для теста <br>
Это просто текст <br>
<a href="#">Ссылка</a> <br>
текст есть текст <br>

Answer 1

const area = document.querySelector('content')
const link = document.querySelector('.link')
const unlink = document.querySelector('.unlink')

link.addEventListener('click', e => {
  url = prompt('Введите адрес ссылки', 'http:\/\/');
  document.execCommand('createlink', false, url);
})

unlink.addEventListener('click', e => {
  document.execCommand('unlink', false);
})

#content {
  display: block;
  width: 200px;
  height: 100px;
  resize: none;
  border: 1px solid black;
  margin-top: 15px;
  
}

.link, .unlink {
  color: #272727;
  border: 1px solid grey;
  padding: 5px;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet"/>
<a href="javascript:void(0)" class="link">
  <i class='fa fa-link'></i>
</a>
<a href="javascript:void(0)" class="unlink">
  <i class='fa fa-unlink'></i>
</a>
<div id="content" contenteditable>
  Текст
</div>

БЛОГ НА HUSL

Как добавлять и удалять тэги вокруг выделенного текста?

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