Giả sử một trang web có một chuỗi như "Tôi là một chuỗi đơn giản" mà tôi muốn tìm. Làm thế nào tôi sẽ đi về điều này bằng cách sử dụng JQuery?
Giả sử một trang web có một chuỗi như "Tôi là một chuỗi đơn giản" mà tôi muốn tìm. Làm thế nào tôi sẽ đi về điều này bằng cách sử dụng JQuery?
Câu trả lời:
jQuery có phương thức chứa. Đây là một đoạn dành cho bạn:
<script type="text/javascript">
$(function() {
var foundin = $('*:contains("I am a simple string")');
});
</script>
Bộ chọn ở trên chọn bất kỳ phần tử nào chứa chuỗi đích. Foundin sẽ là một đối tượng jQuery chứa bất kỳ phần tử phù hợp nào. Xem thông tin API tại: https://api.jquery.com/contains-selector/
Một điều cần lưu ý với ký tự đại diện '*' là bạn sẽ nhận được tất cả các yếu tố, bao gồm cả các yếu tố cơ thể html mà bạn có thể không muốn. Đó là lý do tại sao hầu hết các ví dụ tại jQuery và các nơi khác sử dụng $ ('div: chứa ("Tôi là một chuỗi đơn giản")')
Thông thường các bộ chọn jQuery không tìm kiếm trong "các nút văn bản" trong DOM. Tuy nhiên, nếu bạn sử dụng hàm .contents (), các nút văn bản sẽ được bao gồm, thì bạn có thể sử dụng thuộc tính nodeType để chỉ lọc các nút văn bản và thuộc tính nodeValue để tìm kiếm chuỗi văn bản.
$ ('*', 'cơ thể') .và bản thân() .contents () .filter (hàm () { trả lại cái này.nodeType === 3; }) .filter (hàm () { // Chỉ khớp khi chứa 'chuỗi đơn giản' ở bất kỳ đâu trong văn bản return this.nodeValue.indexOf ('chuỗi đơn giản')! = -1; }) .each (hàm () { // Làm gì đó với cái này.nodeValue });
.andSelf()
. Từ api.jquery.com/andSelf : "Các đối tượng jQuery duy trì một ngăn xếp bên trong theo dõi các thay đổi đối với tập hợp các phần tử phù hợp. Khi một trong các phương thức truyền tải DOM được gọi, tập hợp các phần tử mới sẽ được đẩy lên ngăn xếp. bộ phần tử trước đó cũng được mong muốn, .andSelf () có thể giúp đỡ. " Tôi thấy không có bối cảnh trước đó, tôi đang thiếu gì?
Điều này sẽ chỉ chọn các phần tử lá có chứa "Tôi là một chuỗi đơn giản".
$('*:contains("I am a simple string")').each(function(){
if($(this).children().length < 1)
$(this).css("border","solid 2px red") });
Dán sau đây vào thanh địa chỉ để kiểm tra nó.
javascript: $('*:contains("I am a simple string")').each(function(){ if($(this).children().length < 1) $(this).css("border","solid 2px red") }); return false;
Nếu bạn muốn lấy chỉ "Tôi là một chuỗi đơn giản" . Đầu tiên bọc văn bản trong một yếu tố như vậy.
$('*:contains("I am a simple string")').each(function(){
if($(this).children().length < 1)
$(this).html(
$(this).text().replace(
/"I am a simple string"/
,'<span containsStringImLookingFor="true">"I am a simple string"</span>'
)
)
});
và sau đó làm điều này.
$('*[containsStringImLookingFor]').css("border","solid 2px red");
Nếu bạn chỉ muốn nút gần nhất với văn bản bạn đang tìm kiếm, bạn có thể sử dụng nút này:
$('*:contains("my text"):last');
Điều này thậm chí sẽ hoạt động nếu HTML của bạn trông như thế này:
<p> blah blah <strong>my <em>text</em></strong></p>
Sử dụng bộ chọn ở trên sẽ tìm thấy <strong>
thẻ, vì đó là thẻ cuối cùng chứa toàn bộ chuỗi đó.
<p>my text <b>my text</b></p>
- xóa tổ tiên của <b>
thẻ sẽ thua trận đấu khác
Hãy nhìn vào phần tô sáng (plugin jQuery).
Chỉ cần thêm vào câu trả lời của Tony Miller là điều này giúp tôi đạt 90% cho những gì tôi đang tìm kiếm nhưng vẫn không hiệu quả. Thêm .length > 0;
vào cuối mã của anh ấy đã làm cho kịch bản của tôi hoạt động.
$(function() {
var foundin = $('*:contains("I am a simple string")').length > 0;
});
foundin += '*';
chức năng này sẽ hoạt động. về cơ bản thực hiện tra cứu đệ quy cho đến khi chúng ta có được một danh sách riêng biệt của các nút lá.
function distinctNodes(search, element) {
var d, e, ef;
e = [];
ef = [];
if (element) {
d = $(":contains(\""+ search + "\"):not(script)", element);
}
else {
d = $(":contains(\""+ search + "\"):not(script)");
}
if (d.length == 1) {
e.push(d[0]);
}
else {
d.each(function () {
var i, r = distinctNodes(search, this);
if (r.length === 0) {
e.push(this);
}
else {
for (i = 0; i < r.length; ++i) {
e.push(r[i]);
}
}
});
}
$.each(e, function () {
for (var i = 0; i < ef.length; ++i) {
if (this === ef[i]) return;
}
ef.push(this);
});
return ef;
}