查找两个标记/节点之间的文本

当检查同级时，可以通过下拉到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一起使用。

好吧，你可以试试这个。。。

至少，当使用2spans像您的示例一样合并它们时（当存在"空"元素时），它非常完美。否则，您需要稍微考虑一下如何处理持续的span。

（要查看我所说的内容，只需查看最后一行的注释：nextElem.remove()并查看新的div html）。

现场演示：http://jsfiddle.net/oscarj24/t45MR/

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>

jQuery:

$(document).ready(function () {
    var elem = $('#test');
    elem.contents().filter(function(index) {
        //Get index of an empty element
        if($.trim($(this).text()) === '') 
            //Merge the previous index span with the next index span texts
            mergeSpan(index);
    });
    //Print new inner html
    alert(elem.html());
});
function mergeSpan(index){
    //Get all 'div' elements
    var elems = $('#test').contents();
    //Get previous and next element according to index
    var prevElem = elems.eq(index - 1);
    var nextElem = elems.eq(index + 1);
    //Concat both texts
    var concatText = prevElem.text() + ' ' + nextElem.text();
    //Set the new text in the first span
    prevElem.text(concatText);
    //Remove other span that lasts
    nextElem.remove();
};

结果：

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

我知道您已经接受了一个解决方案，但我想接受挑战，提供一个可以集成到您的工具集中的纯javascript解决方案。以下是我的想法，希望得到任何帮助，让这一切变得更好。

http://jsfiddle.net/ryanwheale/JhZPK/

function joinNeighborsByClassName( className ) {
    var items = document.getElementsByClassName(className),
        next = null,
        remove = [],
        append = '',
        i = 0;
    while( i < items.length && (next = items[i++]) ) {
        while( (next = next.nextSibling) && next !== null ) {
            if((next.nodeType === 3  && /^'s+$/.test(next.nodeValue)) ||     
               (new RegExp("(?:^|'s)" + className + "(?!'S)", "g")).test(next.className) ) {
                append += (next.innerHTML || next.nodeValue);
                if(next.nodeType !== 3) {
                    remove.push(next);
                }
            } else {
                break;
            }
        }
        if(append) items[i-1].innerHTML += append;
        for(var n = 0; n < remove.length; n++) {
            remove[n].parentNode.removeChild(remove[n]);
        }
        remove = [];
        append = '';
    }
}
joinNeighborsByClassName('highlighted');

对于您的最后一个问题"给定两个标签，我如何找到它们之间的文本？"

好吧，我有这个解决方案给你。

var divData = $("#test").html(); // Getting html code inside div

现在，使用preg_match（），您可以获得两个单词之间的文本，在您的情况下是跨度之间的文本

preg_match('/'.preg_quote($word1).'(.*?)'.preg_quote($word2).'/is', $html, $matches);
$word1 = '<span class="highlighted">';
$word2 = '<';
$html = $_POST['divData']; // Via post/get you will have to send the html code gotten in "var divData"

并且对于每个匹配（使用for循环），在变量中插入em，在它们之间添加空白。然后回显结果，并在回调函数中将其添加到div 中

此链接可以帮助您了解如何在jquery jquery POST 中进行POST调用

根据标题的要求，这里有一种在跨度之间获取文本节点的可能方法：

var textNodes=$('#test').contents().filter(function(){
    return this.nodeType == 3; // text node
});

也可以通过将每个节点与前一个节点进行比较来手动检查是否存在连续的跨度，这些跨度之间没有空文本节点。像这样的东西会起作用：

function combineSpansIn(selector, spanClass) {
    // initialize precedent values
    var prec=null;
    var precNodeType;
    $(selector).contents().each(function(){
        if ($.trim( $(this).text() ) !== "") { // empty nodes will be useless here
            var nodeType = this.nodeType;
            // check if still a combinable span
            if (nodeType == 1 && this.className==spanClass && nodeType == precNodeType) {
                // append current node to precedent one
                $(prec).append(" "+ $(this).text() );
                // remove current node
                $(this).remove();
            } else {
                // update precedent values
                prec=this;
                precNodeType = nodeType;
            }
        }
    });
}
combineSpansIn('#test', 'highlighted');

请看一下这个FIDDLE。

嘿。看起来Oscar Jara和我在使用JQuery .contents()方法时提出了类似的想法，但最终得到了一些截然不同的实现：

$(document).ready(function () {
    $("#testDiv").contents().each(function() {
        var prevNode = this.previousSibling;
        var fillerText = "";
        while ((prevNode) && ($.trim($(prevNode).text()) === "")) {
            fillerText += prevNode.nodeValue;
            prevNode = prevNode.previousSibling;
        }
        if ((prevNode) && (this.nodeType === 1) && (prevNode.nodeType === 1)) {
            $(prevNode).text($(prevNode).text() + fillerText + $(this).text());
            $(this).remove();
        }
    });
});

我测试了几个不同的HTML数据集（背靠背的三个跨度，中间有空格和没有空格的跨度，等等），所有这些都基于您的原始代码，它似乎可以工作。关键是跳过<span>标签之间的任何"仅空白"文本节点，同时保留它们可能包含的任何所需间距。