Обернуть выделенный текст тегами в textarea

С помощью JS-свойств selectionStart и selectionEnd можно сделать оборачивание выделенного текста тегами или BB-кодами. Рассмотрим пример добавления тега <b>:

<a id="button-b" href="#"><b>Жирный</b></a>
<textarea id="control" rows="5">...</textarea>
HTML
$('#button-b').click(function(){
	var control = $('#control')[0];
	var start = control.selectionStart;
	var end = control.selectionEnd;

	if (start != end) {
		var text = $(control).val();
		$(control).val(text.substring(0, start) + '<b>' + text.substring(start, end) + '</b>' + text.substring(end));

		// Ставим каретку в конец добавленного тега.
		$(control).focus();
		var sel = end + 7;
		control.setSelectionRange(sel, sel);
	}
	return false;
});
JS

Результат:

Чтобы не дублировать код для других тегов, лучше написать отдельную функцию.

<a id="button-b" href="#"><b>Жирный</b></a>
<a id="button-i" href="#"><i>Курсив</i></a>
<a id="button-u" href="#"><u>Подчеркнутый</u></a>
<a id="button-s" href="#"><strike>Зачеркнутый</strike></a>
<a id="button-a" href="#">Ссылка</a>

<textarea id="control" rows="5">...</textarea>
HTML
function addTag(open, close) {
	var control = $('#control')[0];
	var start = control.selectionStart;
	var end = control.selectionEnd;
	if (start != end) {
		var text = $(control).val();
		$(control).val(text.substring(0, start) + open + text.substring(start, end) + close + text.substring(end));
		$(control).focus();
		var sel = end + (open + close).length;
		control.setSelectionRange(sel, sel);
	}
	return false;
}

// Жирный
$('#button-b').click(function(){
	return addTag('<b>', '</b>');
});

// Курсив
$('#button-i').click(function(){
	return addTag('<i>', '</i>');
});

// Подчеркнутый
$('#button-u').click(function(){
	return addTag('<u>', '</u>');
});

// Зачеркнутый
$('#button-s').click(function(){
	return addTag('<strike>', '</strike>');
});

// Ссылка
$('#button-a').click(function(){
	return addTag('<a href="' + prompt('Введите адрес', '') + '">', '</a>');
});

// При клике на кнопки не снимаем фокус с textarea.
$('a').on('mousedown', function() {
	return false;
});
JS

Результат:

19.11.2019, обновлено 18.01.2020
Предыдущая запись Автомасштаб Яндекс карты
Следующая запись Получить фото из Instagram без API

Комментарии 1

Дмитрий Соболев Дмитрий Соболев
10 апреля 2020 в 05:25
0
Не хватает добавления тегов без выделения, там где каретка.

, чтобы добавить комментарий.

Другие публикации

У текстовых полей (textarea, input text и т.д.) есть JS-свойства selectionStart и selectionEnd, которые возвращают...
1495
0
getSelection() возвращает выделенный пользователем текст, за исключением текстовых полей, ​для них используются...
1796
0
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
23615
+3
Селект с множественным выбором (select multiple) весьма не удобен, при выборе часто забываешь нажимать сtrl и все сбрасывается. В место него можно использовать чекбоксы в выпадающем списке.
10822
+4
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
30997
+8
Ниже приведён список MIME-заголовков и расширений файлов.
2362
+1