javascript - 当我尝试使用 JavaScript 插入 html 元素时没有任何改变

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 控制台时，我看到元素没有插入。那么我的代码有什么问题？

标签： javascripthtml

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
    }
}

您可以在此处获取有关将选定文本替换为另一个文本的更多信息。另外，请查看DOM Range W3 规范或DOM Range MDN 文档。