如何在SPAN旁邊的DIV中獲取文本

Question

我正在構建一個刮板，並且遇到了一些HTML，我不知道如何解析。我有這樣一段代碼。

<div> 
    <span>SomeHeader</span> 
    "Some text" 

    <span>SomeOtherHeader</span> 
    "More text" 
</div> 

在JS或JQuery的，我想找到「SomeHeader」，並尋找「SomeText」則會後，沒有「其他文本」。

任何幫助表示讚賞！

Answer 1

您可以使用:contains()選擇器來查找包含某些文本的元素，確切地說。例如$("span:contains(Text)")選擇底部的跨度。

<span>Text</span> 
<span>Text text</span> 

您需要使用.filter(function)方法精確檢查元素的文字，然後選擇元素。當您選擇元素時，請使用nextSibling屬性來獲取元素的兄弟文本。

var targetSpan = $("div > span").filter(function() { 
 
    return $(this).text() === "SomeHeader"; 
 
}); 
 
var text = targetSpan[0].nextSibling.nodeValue.trim(); 
 

 
console.log(text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <span>SomeHeader</span> 
 
    "Some text" 
 
    <span>SomeOtherHeader</span> 
 
    "More text" 
 
</div>

Answer 2

獲得對DIV元素的引用後，可以使用其「textContent（）」方法提取DIV元素及其子元素中的所有文本。然後，這只是找到你要找的東西的事情。您可以使用正則表達式，如「/ SomeHeader * /」，然後是「/ SomeOtherHeader /」，以提取您想要的內容...

Answer 3

你可以嘗試這樣的事：

$('div') 
    .contents() 
    .filter(function() { 
     if($(this).text() == "SomeHeader") { 
      alert($(this)[0].nextSibling.nodeValue); 
     } 
    }); 

例子：https://jsfiddle.net/DinoMyte/bko2wsbu/1/