Question

我认为这相当简单，但我认为关键字过于笼统，因此我不断收到this和this等内容的查询结果。

基本上，我有以下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 sit amet，consecteturadipiscing

给定两个标签，如何在之间找到文本？

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();
  }
}

在this CodePen中使用此HTML。

Answer 2

好吧，你可以尝试一下......

至少使用 2 spans合并它们就像你的例子一样（当存在“空”元素时）。否则，您需要稍微考虑一下处理持续的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>

Answer 3

我知道您已经接受了解决方案，但我想接受挑战，提供一个可以整合到您的工具集中的纯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');

Answer 4

关于你的上一个问题“给定两个标签，我如何找到它们之间的文字？”

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

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循环）concat em在变量中添加空格。然后回复你的结果，并在你的回调函数中将它添加到你的div

此链接可以帮助您在jquery jquery post

中进行POST调用

Answer 5

当标题请求它时，这是在跨度之间获取文本节点的可能方法：

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。

Answer 6

嘿。。。看起来像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数据集（三个背靠背，跨越空间和没有空间等）都基于您的原始代码，它似乎工作。。。关键是只跳过任何＆＃34;空白＆＃34; <span>标签之间的文本节点，同时保留它们可能包含的任何所需间距。

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

6 个答案: