Определите, какой элемент «sub» выбран

Question

У меня есть элемент p, и пользователи могут выбирать фрагменты этого текста с помощью мыши. Мне нужно определить, какой элемент выбран (в приведенном ниже примере p или span).

$(document).ready(function() {

$('button').click(function(e) {
  console.log('sel', window.getSelection());
  console.log('h', window.getSelection().getRangeAt(0));

  // How can I determine if a span is selected or a text section of the p?


  // If a span is selected I do nothing except make the span italic
  // If a text section of the p is selected I need to add a span and then make the span italic

  if (window.getSelection().getRangeAt(0).commonAncestorContainer.nodeType != 'span') {
    var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var span = document.createElement("span"); 
    span.appendChild(selectedText); 
    selection.insertNode(span);
  }
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<p>Foo bar <span>span</span></p>

<button>Italicise</button>