Ничего не изменилось, когда я пытаюсь вставить элемент html, используя JavaScript

Question

Я создаю простой текстовый редактор в html, и у меня есть функция, которая позволяет пользователю вставлять ссылку на веб-сайт в текст. Вот код:

    function setUrl() {
        window.url = document.getElementById('txtFormatUrl').value;
        window.sText = document.getSelection();
        var urlanchor = document.createElement("A");
        var urlatt = document.createAttribute("href");
        urlatt.value = window.url;
        urlanchor.setAttributeNode(urlatt);
        window.sText = urlanchor;
    }

Принцип работы таков: будет место для редактирования текста и поле для ввода URL. Пользователь сначала выделил текст, затем введите URL-адрес. Пользователь нажимает кнопку вставки, которая вызывает функцию setUrl (). Но когда я пытаюсь, URL-адрес не вставляется в текст, при открытии консоли F12 я увидел, что элемент не вставляется. Так что не так с моим кодом?

Answer 1

Предположим, что элемент с ID txtFormatUrl - это <input> с действующим URL, код будет следующим:

function setUrl() {
    var url = document.getElementById('txtFormatUrl').value; // Get value from input tag
    var selection = document.getSelection(); // Get info from text selected

    if(selection.rangeCount) {
        var textSelected = selection.toString(); // Get text selected
        var element = document.createElement('a'); // Create a new anchor DOM node
        element.innerText = textSelected; // Set de text selected to the new anchor DOM node
        element.setAttribute('href', url); // Set a href value

        var range = selection.getRangeAt(0); // Get selection range
        range.deleteContents(); // Delete the current text
        range.insertNode(element); // Replace the text
    }
}

Вы можете получить дополнительную информацию здесь about замена выделенного текста на другой. Также обратите внимание на спецификацию DOM Range W3 или DOM Range MDN docs .