[英]How can I make `.innerText` ignore invisible children of an invisible element?
測試代碼的結果如下:
div[0].innerText === "aaaaa zzzzz"
div[1].innerText === "aaaaainvisiblezzzzz"
我如何強制innerText
為div[1]
提供與div[0]
相同的結果?
我試圖將div[1]
附加到臨時文檔,但由於文檔實際上沒有顯示,所以沒有用。 只將它附加到字面上可見的文檔。
var div = []; div[0] = document.getElementById("visible"); div[1] = div[0].cloneNode(true); show(0); show(1); function show(i) { document.getElementById("output").innerHTML += "<p>div[" + i + "].innerText === <code>" + div[i].innerText.replace(/\\n/g, "") + "</code></p>"; }
#visible {display: block; font-family: sans-serif; font-size: larger; color: red;} code {background-color: lightgray; padding: 0 .318em;}
<div id="visible"> <span style="display: inline">aaaaa</span> <span style="display: none">invisible</span> <span style="display: inline">zzzzz</span> </div> <div id="output"></p>
僅將其附加到用戶可見的文檔中。
但用戶不一定要看到這一點。 :-)如果你追加它,抓住innerText
,然后刪除它,用戶永遠不會看到它:
var div = []; div[0] = document.getElementById("visible"); div[1] = div[0].cloneNode(true); show(0); document.body.appendChild(div[1]); // ***** show(1); document.body.removeChild(div[1]); // ***** function show(i) { document.getElementById("output").innerHTML += "<p>div[" + i + "].innerText === <code>" + div[i].innerText.replace(/\\n/g, "") + "</code></p>"; }
#visible {display: block; font-family: sans-serif; font-size: larger; color: red;} code {background-color: lightgray; padding: 0 .318em;}
<div id="visible"> <span style="display: inline">aaaaa</span> <span style="display: none">invisible</span> <span style="display: inline">zzzzz</span> </div> <div id="output"></p>
或者,由於元素不在DOM中,因此CSS不能使其不可見,只能內聯樣式。 我想不出任何其他的內聯樣式會使文本被innerText
你的display: none
之外的內部文本display: none
和visibility: hidden
( opacity: 0
,例如,不執行),所以排除它是微不足道的這些並規范化非pre
元素的空格:
function getInnerText(element) {
var node, text = "";
if (element.style.display.toLowerCase() !== "none" && element.style.visibility.toLowerCase() !== "hidden") {
for (node = element.firstChild; node; node = node.nextSibling) {
if (node.nodeType === 3) {
text += node.nodeValue;
} else if (node.nodeType === 1) {
text += getInnerText(node);
}
}
}
// Normalize all whitespace if not "pre"
if (element.tagName !== "PRE" && element.style.whiteSpace.toLowerCase().indexOf("pre") == -1) {
text = text.replace(/\s+/g, ' ');
}
return text;
}
這可能需要調整(我不認為它正確地處理<div>stuff<pre>big gap</pre></div>
),但如果你不想使用第一個,你可以運行這個想法解決方案......
例:
var div = []; div[0] = document.getElementById("visible"); div[1] = div[0].cloneNode(true); show(0); document.body.appendChild(div[1]); // ***** show(1); document.body.removeChild(div[1]); // ***** function show(i) { document.getElementById("output").innerHTML += "<p>div[" + i + "].innerText === <code>" + getInnerText(div[i]).replace(/\\n/g, "") + "</code></p>"; } function getInnerText(element) { var node, text = ""; if (element.style.display.toLowerCase() !== "none" && element.style.visibility.toLowerCase() !== "hidden") { for (node = element.firstChild; node; node = node.nextSibling) { if (node.nodeType === 3) { text += node.nodeValue; } else if (node.nodeType === 1) { text += getInnerText(node); } } } // Normalize all whitespace if not "pre" if (element.tagName !== "PRE" && element.style.whiteSpace.toLowerCase().indexOf("pre") == -1) { text = text.replace(/\\s+/g, " "); } return text; }
#visible {display: block; font-family: sans-serif; font-size: larger; color: red;} code {background-color: lightgray; padding: 0 .318em;}
<div id="visible"> <span style="display: inline">aaaaa</span> <span style="display: none">invisible</span> <span style="display: inline">zzzzz</span> </div> <div id="output"></p>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.