在两个标签/节点之间查找文本

Question

我认为,这将是相当简单的,但我认为关键字是太一般,所以我不断收到查询结果的东西像这样和这个.

基本上,我有以下HTML:

<div id="test">
    Lorem
    <span class="highlighted">ipsum</span>
    dolor sit amet,
    <span class="highlighted">consectetur</span>
    <span class="highlighted">adipiscing</span>
    elit. Sed massa.
<div>

我想将相邻的span标签合并到一个span标签中,这意味着找到它们之间只有空格的跨距(这可能包括空格,制表符和换行符).

我正在寻找的结果是这样的:

<div id="test">
    Lorem
    <span class="highlighted">ipsum</span>
    dolor sit amet,
    <span class="highlighted">consectetur adipiscing</span>
    elit. Sed massa.
<div>

我检查过这个nextUntil函数,但它似乎只返回标签,而不是文本.结果,例如,

$("span.highlighted").nextUntil("span.highlighted").andSelf().text();

是

ipsumconsecteturadipiscing

而不是

ipsum dolor坐下来,精神饱满

鉴于两个标签,我如何找到它们之间的文本？

Answer 1

通过下拉到DOM,您可以在检查兄弟节点时查看文本节点内容.

就像是:

function combineSpans(span, nextspan)
{
  var follower = span.nextSibling;
  var concat = true;

   while (follower != nextspan)
   {
     if (follower.nodeName != '#text')
     {
       concat = false;
       break;
     }

     var len = follower.data.trim().length;
     if (len > 0)
     {
       concat = false;
       break;
     }

     follower = follower.nextSibling;
   }

  if (concat)
  {
    $(span).text($(span).text() + " " + $(follower).text());
    $(follower).remove();
  }
}

在此CodePen中将此与HTML 一起使用.