找到兩個標籤/節點

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標籤合併爲一個跨度的標籤，這意味着它們之間只有空白髮現跨度（這可能包括空格，製表符和換行符）。

我要找的結果是這樣的：

<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的悲坐阿梅特，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

對於你最後一個問題「給出兩個標籤，我怎麼能找到它們之間的文本？」

嗯，我有這個解決方案爲您服務。現在

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" 

和每場比賽（一個用於循環）在變量中加入空白字符串。然後做回聲你的結果和你的回調函數將其添加到您的div

此鏈接可以幫助你如何讓jQuery的jquery post

Answer 3

正如標題所要求它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。

Answer 4

好了，你可以試試這個...

至少它使用 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 5

嘿。 。 。看起來像奧斯卡加拉和我想出了周圍使用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數據（三個跨背TO-返回，跨越與之間和沒有空格等）都基於您的原始代碼，它似乎工作。 。 。關鍵是跳過<span>標籤之間的任何「僅空白」文本節點，同時保留它們可能包含的任何所需間距。

Answer 6

我知道你已經接受了一個解決方案，但我想要接受挑戰，提供一個純粹的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');