我正在尝试将链接插入到选定的文本中，这在前端编辑器中很常见。
我可以添加一个指向用户文本选择的链接，如下所示：
var sel = window.getSelection();
var e = document.createElement("a");
e.innerHTML = sel.toString();
e.type = "link";
e.href = "www.the_link_to_open.com"
e.target = "_blank";
var range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode(e)
这样就成功添加了一个<a>围绕所选单词添加标签，并添加添加链接所需的属性，如下所示：
<a type="link" href="www.the_link_to_open.com" target="_blank">highlighted text</a>
但是，用户在编辑器中经历的流程是选择单词，然后打开一个可以添加链接的输入。但是，一旦用户单击（聚焦）输入字段，window.getSelection()注册input作为选择，这显然使得添加链接变得不可能（因为所选单词需要作为选择）。
我尝试存储结果window.getSelection()稍后使用，但这似乎会动态更改存储的值。我什至尝试了硬（？）副本来尝试存储window.getSelection()永久使用const selection = JSON.stringify(window.getSelection())但这并没有捕获输出。
当用户焦点远离所选文本时，如何保存选择对象？
在这里，您有一个具有两个功能的工作解决方案，如我上面的评论中所述。
let selectedText, range;
function getSelectedText() {
const selectObj = window.getSelection();
selectedText = selectObj.toString();
range = selectObj.getRangeAt(0)
}
function createLink(e) {
var a = document.createElement("a");
a.innerHTML = selectedText
a.type = "link";
a.href = e.target.value
a.target = "_blank";
range.deleteContents();
range.insertNode(a);
}
document.querySelector('.text').addEventListener('mouseup', getSelectedText)
document.querySelector('.link').addEventListener('change', (e) => createLink(e))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima illum, quod assumenda nisi illo hic quo minus excepturi quasi labore debitis nemo molestiae nesciunt, neque laboriosam repellendus necessitatibus vero corporis.
</div>
<br />
<div>
<label>Add url</label>
<input class="link" type="text" />
</div>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
