在加载时添加em标签以突出显示，但文本未突出显示

Question

我正在加载时添加em标签以突出显示文本。

在以下两种情况下突出显示文本：

<em><span></span></em>

<em>Text</em>

但是，它不会突出显示案例文本：

<em><p><span></span></p></em>

<em><blockquote><p><span></blockquote></p></span></em>

我该如何解决？我在做什么错？

下面是我正在使用的代码：

var s = window.getSelection();
    
function dig(el){
    $(el).contents().each(function(i,e){
        if (e.nodeType==1){
            // not a textnode
         dig(e);
        }else{
            if (pos<start){
               if (pos+e.length>=start){
                range.setStart(e, start-pos);
               }
            }
            if (pos<end){
               if (pos+e.length>=end){
                range.setEnd(e, end-pos);
               }
            }
            pos = pos+e.length;
        }
    });
}


var pos;

var start,end, range;
function highlight(element,st,en){
    range = document.createRange();
   
    start = st;
    end = en;
    pos = 0;
    dig(element);
    s.removeAllRanges();
    s.addRange(range);
    var ra = s.getRangeAt(0);
    var newNode = document.createElement("em");
    newNode.appendChild(ra.extractContents());
    ra.insertNode(newNode);
}

我认为p标签在这里造成了问题，因为该文本未突出显示。

Answer 1

是的，您是正确的。问题出在最后一个样本中。 HTML此处的格式不正确。 关闭blockquote p和span标签的顺序不正确。

正确的方法是

<em>
  <blockquote>
    <p><span>Sample Text</span></p>
  </blockquote>
</em>

see this fiddle，问题中的所有示例都在这里工作。

理想情况下，em应该是最里面的元素，并且不应包装其他HTML元素。