我如何在 contenteditable 中 select 整个 url 地址

Question

在 contenteditable 中，链接不起作用，所以我认为最好的解决方案是至少能够 select 整个 url 通过单击一次或两次单击光标时在 url 的任何部分，然后右键单击并转到该站点。是否有 javascript 解决方案，类似于 android phone 的长按 select 和粘贴？

<div contenteditable="true">some text here, then the complete url https://gizmodo.com/e-ink-kaleido-3-gallery-3-foldable-color-e-readers-1848842166 but i just want to select the url with one or two clicks, how? </div>

内容可编辑：

这里有一些文字，然后是完整的 url https://gizmodo.com/e-ink-kaleido-3-gallery-3-foldable-color-e-readers-1848842166 但我只想点击一两次 select url，怎么样？

Answer 1

您可以将 url 字符串替换为 anchor tags 并附加一个 onclick 侦听器以在单击时导航至 url：

text.innerHTML = text.textContent.replace(/https*:\/\/[^\s]+/gmi, (match) => `<a style="cursor:pointer" href="${match}">${match}</a>`);

[...text.children].forEach(a => a.onclick = (e) => window.open(a.href))

text.onblur = e => {
e.target.innerHTML = e.target.textContent.replace(/https*:\/\/[^\s]+/gmi, (match) => `<a style="cursor:pointer" href="${match}">${match}</a>`);
[...text.children].forEach(a => a.onclick = (e) => window.open(a.href))
}

<div id="text" contenteditable="true">some text here, then the complete url https://gizmodo.com/e-ink-kaleido-3-gallery-3-foldable-color-e-readers-1848842166 i just want to select the url with one or two clicks, how? Another url here: https://gizmodo.com/e-ink-kaleido-3-gallery-3-foldable-color-e-readers-1848842166
</div>

(代码段 iframe 中的导航被阻止，但它应该可以正常工作 window)

我如何在 contenteditable 中 select 整个 url 地址

how do i select an entire url address in contenteditable

javascript

contenteditable