Показать сообщение отдельно
  #2 (permalink)  
Старый 27.02.2023, 13:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,137

выделение обернуть в тег и удаление
allonemoon,
выделить текст, затем кликнуть по красному для снятия выделения.
<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .red {
            background-color: #FF0000;
        }
    </style>
</head>

<body>
    <p id="p">Выдели меня: <i>курсив</i> и <b>жирный</b></p>
    <script>
        function optionStyleText(style, tag) {

            let range = window.getSelection().getRangeAt(0);
            let selectionContents = range.extractContents();
            if (!selectionContents.textContent) return;
            let elem = document.createElement(tag);
            elem.appendChild(selectionContents);
            elem.classList.add(style);
            range.insertNode(elem);
        }

        document.querySelector('#p').addEventListener('mouseup', function() {
            optionStyleText('red', 'b')
        })
        document.querySelector('#p').addEventListener('click', function({ target }) {
            if (target = target.closest('b.red')) target.replaceWith(...target.childNodes);
        })
    </script>
</body>

</html>
Ответить с цитированием