检查选择是否包含链接

Question

I am creating a rich text editor and I would like to use the same button to link and unlink selections.

document.execCommand('createLink'...) and document.execCommand('unlink'...) allow users to link and unlink window.getSelection().toString() .

However, there are no inbuilt methods to determine whether a selection is linked or not in the first place, so my question is: How can you check whether or not a selection is linked?

I have tried using document.queryCommandState('createLink') and document.queryCommandState('unlink') , but both queries always return false , even though, for example, document.queryCommandState('bold') works properly.

Answer 1

I found the following piece of code, which works well enough for the time being, kicking around on 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

You also may be able to retrieve the link HTML element and pass it to Selection.containsNode()

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

Answer 3

You need to check the anchorNode and focusNode text nodes to see if they are a elements. More details on MDN

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