使用JavaScript查找元素的文本子元素

-1

我想使用普通JavaScript從以下DOM結構中找到文本片段「This is for testing selector」。使用JavaScript查找元素的文本子元素

<html> 
    <body> 
     <div class="breadcrumb"> 
      <a title=" Home" href="http://www.google.com/"> Home</a> 
      <span class="arrow">»</span> 
      <a title="abc" href="http://www.google.com/">test1</a> 
      <span class="arrow">»</span><a title="xyz" href="http://www.google.com/">test2</a> 
      <span class="arrow">»</span> 
      This is for testing selector 
     </div> 
    </body> 
</html>

來源

2016-05-25 user2940827

JSoup是你的朋友 –

nopes ......只有JavaScript – user2940827

可以請你澄清你的問題是什麼 – Maxwelll

我相信你想這個答案代碼：Select text in javascript

但是，如果你不試圖使容器CONTENTEDITABLE和只想使文本高亮顯示，你可以做什麼像這樣：

var textToHighlight = "This is for testing selector"; 
var breadcrumb = document.querySelector("#breadcrumb"); 
breadcrumb.innerHTML.replace(textToHighlight, 
      "<span style='background-color:red'>" + textToHighlight + "</span>");

來源

2016-05-25 19:24:47 nixkuroi

nixkuroi我不想硬編碼的變量textToHighlight的價值，你可以檢查，並得到任何選擇器的幫助，如標記名或類名什麼那麼... ... – user2940827

我認爲有可能是一個簡單的解決方案，但是這也適用：

var element = document.getElementsByClassName("breadcrumb")[0]; 
 
var children = element.childNodes; 
 
for (i in children) { 
 
    if (children[i] instanceof Text) { 
 
    content = children[i].textContent; 
 
    if (content.trim() != "") { 
 
     alert(content); 
 
    } 
 
    } 
 
}

<body> 
 
    <div class="breadcrumb"> 
 
    <a title=" Home" href="http://www.google.com/"> Home</a> 
 
    <span class="arrow">»</span> 
 
    <a title="abc" href="http://www.google.com/">test1</a> 
 
    <span class="arrow">»</span><a title="xyz" href="http://www.google.com/">test2</a> 
 
    <span class="arrow">»</span> This is for testing selector 
 
    </div> 
 
</body>

此代碼遍歷div的子元素，並搜索文本節點。它會提醒那個不空的人。

（僅用鉻測試）

來源

2016-05-25 19:38:56 SinistraD

這應該有所斬斷。

document.getElementsByClassName('breadcrumb')[0].lastChild;

注意，如果文本「這是測試的選擇」這隻會工作仍然是在breadcrumb

來源

2016-05-25 19:43:55 mayor

最後一個孩子。如果你要選擇的文本中的所有標籤後總是在包裹在div.breadcrumb標籤，在你的榜樣，然後使用此：

document.querySelector('div.breadcrumb').lastChild.textContent.trim()

使用querySelector方法來訪問div.breadcrumb元素，然後訪問ŧ他在該元素上的屬性lastChild，它給你你正在尋找的textNode。現在只需使用textContent屬性獲取該元素上的文本，最後使用trim方法來擺脫前導空格和尾隨空格以及行返回。

JSBin example.

來源

2016-05-25 20:06:20 bloodyKnuckles

使用JavaScript查找元素的文本子元素

回答

相關問題