我如何确定双击选定的单词是否在一个范围内

如何解决我如何确定双击选定的单词是否在一个范围内

我的内容区域中有此内容，并且想要切换所选文本的颜色。但是 Firefox 和带有 doublclick 的 edge-chrome 是有区别的。

$(".classWrapper").on("click",function(){
    let param=$(this).attr("data-param");
    let elementTag=$(this).attr("data-tag");
    let classes="";
    let result="";
    let text="";
    
    let sel = window.getSelection();
    
    let ranges = [];
    for(let i = 0; i < sel.rangeCount; i++) {
     ranges[i] = sel.getRangeAt(i);
    };  
    let range = sel.getRangeAt(0);
    let start = range.startOffset;
    let end = range.endOffset;      
    if (range > "" ) {
    
    
    let tagName=sel.anchorNode.parentNode.tagName;
    
    classNames=sel.anchorNode.parentNode.getAttribute("class");

    // firefox finds a DIV - although the word was surrounded with a SPAN
    // Chrome shows a SPAN - so i can do further things
    
    alert(tagName);

    if (tagName == "SPAN") {
      // i can remove or change the class
    }
})

我的问题只出现在 Firefox 上！双击选择一个词 - firefox 无法识别现有的 SPAN。用鼠标选择单词 - firefox 识别 SPAN。

双击选择单词“dolor”并指定“text-danger” 火狐：

Lorem ipsum dolor sit amet,<span class="text-danger">consectetur </span>adipisicing elit,sed do eiusmod hallo

重复这个，firefox 做这个：

Lorem ipsum <span class="text-danger"><span class="text-danger">dolor </span></span>sit amet,consectetur adipisicing elit,sed do eiusmod hallo

与 Chrome 相同（首选）：

Lorem ipsum <span class="text-danger">dolor </span>sit amet,sed do eiusmod hallo

重复这个（这也是我在 FF 中想要的）

Lorem ipsum dolor sit amet,sed do eiusmod hallo