我正在嘗試window.find()在 JavaScript 中使用跨元素查找和選擇文本。總體而言，它按預期作業，除了跨<p>元素（或換行符？）。
這是我的簡化 HTML：
findText("first with style"); // true
findText("second"); // true
findText("third"); // true
findText("second\nthird"); // false
findText("second\n\nthird"); // false
findText("second\rthird"); // false
findText("second\r\nthird"); // false
findText("second<br>third"); // false
findText("second</p><p>third"); // false
findText("second third"); // false
function findText(needle) {
console.log(window.find(needle));
}.as-console-wrapper{ max-height:75px !important; }<p>first<b> with style</b></p>
<p>second</p>
<p>third</p>這是一個JS fiddle。
我錯過了什么？
uj5u.com熱心網友回復：
由于它window.find()是非標準的 MDN Docs并且它有幾個錯誤 Bugs List，您可以使用這個替代 hack。它也將捕獲HTML Markups。
function windowFind(str){
return document.body.innerHTML.indexOf(str) > -1;
}
筆記
由于我正在掃描整個身體，它也將包含行內 javascripts。因此，當搜索文本與 javascript 函式呼叫匹配時，檢查將已經回傳。
前任：-
// This will return true even tho it does not exist in the document.
// Because, `adsdasa` matches with `windowFind('adsdasa')` since it's a part of body.innerHTML
windowFind('adsdasa');
</script>
</body>
因此，我建議您在特定元素內進行搜索，而不是body避免上述模棱兩可的行為。
uj5u.com熱心網友回復：
您可以做的最大作業是查詢元素并在兩者之間進行選擇：
findText("first with style"); // true
findText("second"); // true
findText("third"); // true
findMultiple("body p:nth-child(2)","body p:nth-child(4)"); // true
function findText(needle){
console.log(window.find(needle));
}
function findMultiple(start,end){
var range = document.createRange();
var root_node = document.body;
range.setStart(root_node.querySelector(start).firstChild, 0);
range.setEnd(root_node.querySelector(end).firstChild, root_node.querySelector(end).innerText.length);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}<p>first<b> with style</b></p>
<p>second</p>
<p>middle</p>
<p>third</p>您還可以querySelect檢查所有元素并檢查是否包含您的文本，存盤該元素然后運行該功能。但這可能會更慢，這取決于。
uj5u.com熱心網友回復：
我認為任何瀏覽器都不允許使用其本機搜索功能進行多行搜索，因此 DOM API 也不正常，因為它應該或多或少地反映該功能。
如果您要做的只是檢查給定文本是否存在于當前可見文本中，您可以獲得innerText僅回傳可見文本的檔案（這里“可見”是指呈現的文本，不一定是那些在螢屏上）。
const text = document.documentElement.innerText;
const toFind = "orci.\n\nPhasellus"; // end of first paragraph start of second.
console.log(text.includes(toFind));<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada, massa nec elementum imperdiet, enim arcu fringilla purus, ac bibendum massa augue nec odio. Donec vel hendrerit ligula. Maecenas ante dolor, faucibus tristique commodo non, sollicitudin
at augue. In lobortis quis est a mattis. Aenean blandit lorem at porta ultrices. Nullam sit amet mauris a justo congue iaculis. Duis urna velit, luctus vel tempus quis, consequat id ex. Etiam accumsan urna ac imperdiet gravida. Etiam gravida rhoncus
quam sit amet placerat. In tincidunt lorem non lacus semper hendrerit. Phasellus nec ultrices orci.
</p>
<p>
Phasellus sit amet porttitor leo. Phasellus ut eleifend nulla. Morbi luctus odio quis risus aliquam fermentum. Aenean ultrices tortor leo, eu fermentum tortor tincidunt in. Maecenas sodales nisl erat, nec porta tortor mollis non. Donec vulputate non quam
imperdiet ornare. Integer ex mauris, hendrerit in est sed, sagittis lacinia nulla. Curabitur efficitur dui et neque condimentum, eu lacinia nisi rutrum.
</p>
<p>
Ut vel lorem id justo sodales venenatis. Vestibulum nec mattis risus. Ut a imperdiet lacus, eget molestie dolor. Sed nisl diam, facilisis a nunc non, faucibus suscipit diam. Quisque aliquet, eros sed sodales cursus, ex metus vulputate ante, sagittis dapibus
leo diam sed ligula. Fusce felis nulla, euismod in facilisis vel, viverra sed eros. Praesent ut diam quis nunc ultrices dignissim et vitae ligula. Donec quam orci, consequat eget leo sit amet, fringilla tempus leo. Nullam felis enim, sodales non lectus
ut, pretium tincidunt felis. Sed eget odio sit amet nunc consequat vulputate. Vivamus nisl nisl, condimentum vitae malesuada non, tempus ac metus. Nulla placerat arcu eu risus feugiat, efficitur semper diam fringilla. Curabitur et blandit felis. Curabitur
vel eleifend mi.
</p>
<p>
Maecenas tincidunt mi vestibulum nisi aliquet, at rhoncus mi tristique. Nullam sagittis sed dolor ut aliquet. Sed neque nunc, pulvinar vel ornare id, convallis ut nulla. Integer rhoncus velit non pulvinar commodo. Praesent finibus libero ante, eget venenatis
augue dignissim id. Nam id odio id ante maximus blandit vel nec purus. Sed eleifend leo ut commodo maximus. Nam pretium a mauris a scelerisque.
</p>
<p>
Duis laoreet lorem a nibh dapibus sodales. Curabitur ac orci scelerisque lorem maximus blandit nec ut leo. Nulla feugiat maximus congue. Proin velit leo, suscipit et mollis eu, tempor non eros. Morbi nec mi non lectus auctor fermentum vitae at lectus.
Sed ut massa sapien. Vivamus eu ipsum quis ante mollis volutpat at ac ipsum. Vivamus ut est sem. Quisque eget nulla posuere sapien rutrum ullamcorper. Donec porta nisl quis quam dignissim elementum sit amet ut turpis. Suspendisse ullamcorper non sapien
vitae faucibus. Praesent mollis bibendum pretium. Donec auctor lectus nec urna tincidunt egestas vitae vel quam. Sed a neque eleifend, elementum metus quis, sagittis diam. Pellentesque id purus sed nulla euismod tincidunt.
</p>
</div>如果您還需要選擇文本，您可以使用Selection API并遍歷每個節點以查找匹配的位置，但這將非常繁瑣，因此我將其留作練習現在。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/491744.html
標籤：javascript
上一篇：Joi需要欄位時，它應該是