Javascript 高亮显示两个元素之间的所有文本

给出下面的html示例，我想突出显示两个图像标记之间的所有文本（通过添加css背景属性）。我尝试过使用jquerys.nextUntil（），但是这只使用第一个元素的同级节点，因此在本例中它将不起作用

编辑：下面的图像标记是不可见的占位符，表示注释的起点和终点，在我的文本编辑器中具有相应的id，中间的所有内容都是注释的焦点

<div>
    <p>
        Lorem ipsum dolor
        <img class="commentBoundaryStart data-commentid="1" src="img.png"/>
          sit amet,"
    </p>
    <p>
        consectetur adipiscing elit. 
    </p>
    <h2>Header</h2>
    <p>
         Sed maximus laoreet augue
        <img class="commentBoundaryEnd" data-commentid="1" src="img2.png"/>
         , in ultrices sapien lobortis eu.
    </p>
    <p>
        Loremmmmm
    </p>
</div>

同侧阴唇
坐在阿梅特，”


献祭精英。

标题

塞德·马克西姆斯·劳里特·奥古斯
，位于ultrices sapien lobortis eu。


洛伦姆

使用您的特定标记（

img

在

p

中，深度不大于此），您可以执行以下操作：

//由于无法设置文本节点的样式，我们首先替换它们
//使用跨度元素。
//此操作只能执行一次，且与
//图像标记
$（'p'）。每个（函数（）{
var nodes=this.childNodes；
对于（var i=0；i这种情况下可能的解决方案1）

它只适用于图像之间的1个
。如果使用nextAll时有多个
，如果使用img的
索引或类似内容时有一些
，则需要对其进行一些更改


$（函数（）{
//起跑线
$（'img.commentBoundaryStart'）.parent（）.contents（）.filter（函数（）{
返回this.nodeType==3；
}).wrap（“”）；
$（'img.commentBoundaryStart'）.next（）.css（“背景”，“红色”）；
//中线
var已返回=false；
$（'img.commentBoundaryStart'）.parent（）.nextAll（）.each（function（））{
如果（has_return）{return；}
if（$（this）.contents（）.hasClass（“commentBoundaryEnd”））{
has_返回=true；
返回；
}否则{
$（this.css（“背景”、“红色”）；
}
}); 
//终点线
$（'img.commentBoundaryEnd'）.parent（）.contents（）.filter（函数（）{
返回this.nodeType==3；
}).wrap（“”）；
$（'img.commentBoundaryEnd'）.prev（）.css（“背景”，“红色”）；
})；


“Lorem ipsum dolor”
“坐吧，艾美特，”


“献祭精英。”


“献祭精英。”

“献祭精英。”

“塞德·马克西姆斯·劳里特·奥古斯”
“在ultrices sapien lobortis eu中。”



从这里的答案中汲取灵感后，我设计了自己的综合脚本，用无限深度和复杂性的html块来处理这个问题


$（函数（）{
变量根=$（'#textarea-0001'）；
var-cid=1；
var startMarker=$（“img.commentBoundary[data commentid='“+cid+']”）first（）；
var endMarker=$（$img.commentBoundary[data commentid='“+cid+']”）last（）；
//用跨度包裹起点
startMarker.parent（）.contents（）.filter（函数（）{
返回this.nodeType==3；
}).wrap（“”）；
//如果没有端点标记，则为后面的同级着色
var has_done=假；
startMarker.nextAll（）和self（）.each（函数（））{
如果（你做了什么）{
返回；
}
if（$（this）.has（endMarker）.length>0 | |$（this）.is（endMarker））{
have_done=真；
返回；
}否则{
css（“背景色”、“rgba（128204255,0.5）”；
}
});
//让父母彻底了解情况
var parentsList=startMarker.parentsUntil（根）；
if（parentsList.has（endMarker）.length==0）{
//检查其中的每一项并访问以后的兄弟姐妹
var已返回=false；
parentsList.each（函数（）{
$（this）.nextAll（）.each（function（））{
如果（你回来了）{
返回；
}
如果（$（this）.has（endMarker）.length>0）{
has_返回=true；
返回；
}否则{
css（“背景色”、“rgba（51173255,0.5）”；
}
});    
});
};
//查找终点标记
var endPointContainer=root.children（）.has（endMarker）；
//在跨距中包裹端点
endMarker.parent（）.contents（）.filter（函数（））{
返回this.nodeType==3；
}).wrap（“”）；
//如果早期兄弟姐妹没有开始标记，则为其着色
var为_done=false；
$（endMarker.prevAll（）.andSelf（）.get（）.reverse（））.each（函数（）{
如果（完成了吗）{
返回；
}
if（$（this）.has（startMarker）.length>0 | |$（this）.is（startMarker））{
是否完成=正确；
返回；
}否则{
css（“背景色”，“rgba（0，122，204，0.5）”）；
}
});
//让父母起床直到结束
var parentsListEnd=endMarker.parentsUntil（endPointContainer）；
if（parentsListEnd.has（startMarker.length==0）{
//检查每一个并访问早期的兄弟姐妹
返回的var=false；
parentsListEnd.each（函数（）{
$（this）.prevAll（）.each（function（））{
如果（是否返回）{
返回；
}
if（$（this）.has（startMarker）.length>0 | |$（this）.is（startMarker））{
is_returned=true；
返回；
}否则{
css（“背景色”，“rgba（0,61,102,0.5）”）；
}
});
});
};
});



同侧阴唇
坐在阿梅特，


你好
献祭精英。
标题


献祭精英。

圣斗士a