Javascript: как развернуть диапазон содержимого

Question

Эта функция использует объект диапазона, чтобы вернуть выбор пользователя и обернуть его жирным шрифтом.Есть ли метод, который позволяет мне удалить теги?Как в <b>text<b> = text.Мне на самом деле нужна функция переключения, которая упаковывает выделение в теги и распаковывает его, если уже содержит теги.Аналогично тому, что делают текстовые редакторы при переключении кнопки жирного шрифта.

if "text" then "<b>text</b>"
else "<b>text</b>" then "text"  

...

function makeBold() {

    //create variable from selection
    var selection = window.getSelection();
        if (selection.rangeCount) {
        var range = selection.getRangeAt(0).cloneRange();
        var newNode = document.createElement("b");

            //wrap selection in tags
        range.surroundContents(newNode);

            //return the user selection
        selection.removeAllRanges();
        selection.addRange(range);
    } 
}

Answer 1

Я не упоминал об этом в вашем предыдущем вопросе по этому поводу, потому что это звучало так, как будто вы хотели использовать универсальные средства для окружения диапазона внутри элемента, но для этого конкретного приложения (например, выделение шрифтом / развёртывание текста) и предполагая, что вы неНе обращая внимания на небольшие различия между браузерами в используемых точных тегах (<strong> против <bold> против, возможно, <span style="font-weight: bold">), лучше всего использовать document.execCommand(), который переключит жирность:

function toggleBold() {
    document.execCommand("bold", false, null);
}

Это будет работать во всех браузерах, когда выбранный контент редактируемый, и даже если он не редактируется в IE.Если он вам нужен для работы с нередактируемым контентом в других браузерах, вам нужно временно сделать документ редактируемым:

function toggleBold() {
    var range, sel;
    if (window.getSelection) {
        // Non-IE case
        sel = window.getSelection();
        if (sel.getRangeAt) {
            range = sel.getRangeAt(0);
        }
        document.designMode = "on";
        if (range) {
            sel.removeAllRanges();
            sel.addRange(range);
        }
        document.execCommand("bold", false, null);
        document.designMode = "off";
    } else if (document.selection && document.selection.createRange &&
            document.selection.type != "None") {
        // IE case
        range = document.selection.createRange();
        range.execCommand("bold", false, null);
    }
}