检查选择是否包含链接

Question

我正在创建一个富文本编辑器，我想使用相同的按钮来链接和取消链接选择。

document.execCommand('createLink'...)和document.execCommand('unlink'...)允许用户链接和取消链接window.getSelection().toString() 。

但是，首先没有内置方法来确定选择是否链接，所以我的问题是：如何检查选择是否链接？

我曾尝试使用document.queryCommandState('createLink')和document.queryCommandState('unlink') ，但两个查询总是返回false ，即使，例如， document.queryCommandState('bold')工作正常。

Answer 1

我发现了以下代码，它暂时运行良好，在 SO 上运行：

const isLink = () => {
  if (window.getSelection().toString !== '') {
    const selection = window.getSelection().getRangeAt(0)
    if (selection) {
      if (selection.startContainer.parentNode.tagName === 'A'
      || selection.endContainer.parentNode.tagName === 'A') {
        return [true, selection]
      } else { return false }
    } else { return false }
  }
}

Answer 2

您还可以检索链接 HTML 元素并将其传递给Selection.containsNode()

const linkHtmlElement = document.getElementById('yourId');
// should return true if your linkHtmlElement is selected
window.getSelection().containsNode(linkHtmlElement)

Answer 3

您需要检查anchorNode和focusNode文本节点以查看它们是否a元素。 有关MDN 的更多详细信息

 function isLink () { const selection = window.getSelection() const startA = selection.anchorNode.parentNode.tagName === 'A' const endA = selection.focusNode.parentNode.tagName === 'A' return startA || endA }