Меняет туда и обратно. Выделять как угодно
(на 100% не тестировал)
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let bch = document.getElementById("bch");
txta = document.getElementById("txta")
bch.addEventListener("click", function() {
let text = txta.value,
start = txta.selectionStart-1,
end = txta.selectionEnd;
let rlet = /\p{General_Category=Letter}/u;
while (end > start && !rlet.test(text[end-1])) end --;
while (start < end && !rlet.test(text[start])) start ++;
if (start === end) return
let selected = text.slice(start, end);
if (selected) {
if (text[start-1] === '*' && text[end] === '*') {
txta.setRangeText(selected, start-1, end+1, "end");
} else {
selected = `*${selected}*`;
txta.setRangeText(selected, start, end, "end");
}
}
})
});
</script>
</head>
<body>
<textarea id=txta class="txt">Элемент HTML представляет собой многострочный элемент управления для редактирования обычного текста, который полезен, когда вы хотите разрешить пользователям вводить значительный объем текста в произвольной форме, например комментарий к отзыву или форму обратной связи.
</textarea>
<button id=bch> Change </button>
</body>
</html>