我正在加载时添加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
标签在这里造成了问题,因为该文本未突出显示。
答案 0 :(得分:0)
是的,您是正确的。问题出在最后一个样本中。 HTML此处的格式不正确。
关闭blockquote
p
和span
标签的顺序不正确。
正确的方法是
<em>
<blockquote>
<p><span>Sample Text</span></p>
</blockquote>
</em>
see this fiddle,问题中的所有示例都在这里工作。
理想情况下,em
应该是最里面的元素,并且不应包装其他HTML元素。