Javascript window.find поиск с учетом регистра в определенном div
У меня есть кнопка, которая использует функцию с window.find для поиска/выделения слова.
Проблема, с которой я столкнулся, заключается в том, что я не могу сделать этот поиск чувствительным к регистру. И если возможно, я хотел бы сделать поиск в определенном div.
var myButton = document.getElementById('myButtonId');
myButton.addEventListener('click', function() {findString ('Text',1,0,0,0,0,0)});
function findString (str) {
if (parseInt(navigator.appVersion)<4) return;
var strFound;
if (window.find) {
strFound=self.find(str);
if (!strFound) {
strFound=self.find(str,0,1);
while (self.find(str,0,1)) continue;
}
}
if (!strFound) console.info ("String '"+str+"' not found!")
return;
}<button id = "myButtonId">Find</button>
<div id = "myDivId1">
<p>
This is some text in a paragraph.<br>
It has Text placed in my first div.
</p>
</div>
<div id = "myDivId2">
<p>
This is some texT in a paragraph.<br>
It has tExt placed in my second div.
</p>
</div>Спасибо за указание на это, я не знал об этом, и это хорошо знать.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Update
window.findhas a propertyaCaseSensitivewhich i was aple to find in
https://developer.mozilla.org/en-US/docs/Web/API/Window/find
Итак, здесь я обновил ваш код и использовал window.find(str, true), где логическое значение указывает операцию поиска aCaseSensitive.
var myButton = document.getElementById('myButtonId');
myButton.addEventListener('click', function() { findString ('Text',1,0,0,0,0,0)});
function findString (str) {
if (parseInt(navigator.appVersion)<4) return;
var strFound;
if (window.find) {
strFound=self.find(str, true);
if (!strFound) {
strFound=self.find(str,true,1);
while (self.find(str,true,1)) continue;
}
}
}<button id = "myButtonId">Find</button>
<div id = "myDivId1">
<p>
This is some text in a paragraph.<br>
It has Text placed in my first div.
</p>
</div>
<div id = "myDivId2">
<p>
This is some texT in a paragraph.<br>
It has tExt placed in my second div.
</p>
</div>Спасибо, Ален, именно так я и представлял себе это в начале, но, поскольку мне нужно избегать слишком много возни со страницей, замена элемента не будет правильным подходом для меня. Элементы div на странице, которую я буду искать, содержат всего несколько слов (иногда одно слово), и все они разные, поэтому, если window.find — плохой выбор, возможно, можно было бы найти элемент div, содержащий слово, а затем выберите элемент (div), поэтому выбрано слово/слова div, например "выделено". Знаете ли вы, как этого добиться?
Хорошо, кажется, что window.find может быть чувствительным к регистру. я обновил свой ответ, посмотрите.
Большое спасибо! Я отметил как ответ. Кажется, сейчас работает нормально. :)
Я также нашел кое-что еще, что выглядит многообещающе и может быть лучшим вариантом, чем использовать window.find (на основе комментария vlaz): stackoverflow.com/a/987376
Yah getSelection, знай об этом. это тоже может быть хорошим решением :)
Я нашел это решение для getSelection (stackoverflow.com/a/987376) и сделал пример ниже, если кому-то еще это нужно.
Он выберет тег, содержащий ключевое слово.
var myButton = document.getElementById('myButtonId');
myButton.addEventListener('click', () => selectText());
function selectText(node) {
var pSelect = document.querySelectorAll('p'), i;
for (i = 0; i < pSelect.length; ++i) {
if (pSelect[i].textContent.match('tExt')){
var node = pSelect[i];
}
}
if (window.getSelection) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(node);
selection.removeAllRanges();
selection.addRange(range);
} else {
console.warn("Unsupported browser.");
}
}<h3>Button 'Find' selects the 'p' tag containing 'tExt'.</h3>
<button id = "myButtonId">Find</button>
<div id = "myDivId1">
<p>
This is some text in a paragraph.<br>
It has Text placed in my first div.
</p>
</div>
<div id = "myDivId2">
<p>
This is some texT in a paragraph.<br>
It has tExt placed in my second div.
</p>
</div>
window.find— это нестандартная функция, поэтому трудно сказать, как заставить ее работать, так как даже не гарантируется ее наличие, не говоря уже о том, что она будет вести себя одинаково для каждого пользователя.