สมมติว่าหน้าเว็บมีสตริงเช่น "ฉันเป็นสตริงธรรมดา" ที่ฉันต้องการค้นหา ฉันจะใช้ JQuery ทำอย่างไร
สมมติว่าหน้าเว็บมีสตริงเช่น "ฉันเป็นสตริงธรรมดา" ที่ฉันต้องการค้นหา ฉันจะใช้ JQuery ทำอย่างไร
คำตอบ:
jQuery มีวิธีการบรรจุ นี่เป็นตัวอย่างสำหรับคุณ:
<script type="text/javascript">
$(function() {
var foundin = $('*:contains("I am a simple string")');
});
</script>
ตัวเลือกด้านบนเลือกองค์ประกอบใด ๆ ที่มีสตริงเป้าหมาย Foundin จะเป็นวัตถุ jQuery ที่มีองค์ประกอบใด ๆ ที่ตรงกัน ดูข้อมูล API ได้ที่: https://api.jquery.com/contain-selector/
สิ่งหนึ่งที่ควรทราบด้วยสัญลักษณ์แทน '*' คือคุณจะได้รับองค์ประกอบทั้งหมดรวมถึงองค์ประกอบ HTML ซึ่งเป็นองค์ประกอบที่คุณอาจไม่ต้องการ นั่นเป็นเหตุผลที่ตัวอย่างส่วนใหญ่ที่ jQuery และสถานที่อื่น ๆ ใช้ $ ('div: ประกอบด้วย ("ฉันเป็นสตริงธรรมดา")')
โดยปกติตัวเลือก jQuery จะไม่ค้นหาภายใน "โหนดข้อความ" ใน DOM อย่างไรก็ตามหากคุณใช้ฟังก์ชั่น. เนื้อหา () โหนดข้อความจะถูกรวมไว้ดังนั้นคุณสามารถใช้คุณสมบัติ nodeType เพื่อกรองเฉพาะโหนดข้อความและคุณสมบัติ nodeValue เพื่อค้นหาสตริงข้อความ
$ ('*', 'body') .andSelf () .contents () .filter (ฟังก์ชั่น () { กลับ this.nodeType === 3; }) .filter (ฟังก์ชั่น () { // จับคู่เฉพาะเมื่อมี "สตริงธรรมดา" ที่ใดก็ได้ในข้อความ กลับ this.nodeValue.indexOf ('สตริงที่เรียบง่าย')! = -1; }) .each (ฟังก์ชั่น () { // ทำอะไรกับสิ่งนี้ nodeValue });
.andSelf()
ผมงงว่าทำไมคุณกำลังใช้ จากapi.jquery.com/andSelf : "วัตถุ jQuery รักษาสแต็คภายในที่ติดตามการเปลี่ยนแปลงของชุดองค์ประกอบที่ตรงกันเมื่อหนึ่งในวิธีการสำรวจเส้นทาง DOM เรียกว่าชุดองค์ประกอบใหม่จะถูกผลักลงบนสแต็กหาก องค์ประกอบชุดก่อนหน้าเป็นที่ต้องการเช่นกัน. andSelf () สามารถช่วยได้ " ฉันไม่เห็นบริบทก่อนหน้านี้ฉันทำอะไรหายไป
สิ่งนี้จะเลือกเฉพาะองค์ประกอบใบไม้ที่มี "ฉันเป็นสตริงธรรมดา"
$('*:contains("I am a simple string")').each(function(){
if($(this).children().length < 1)
$(this).css("border","solid 2px red") });
วางสิ่งต่อไปนี้ลงในแถบที่อยู่เพื่อทดสอบ
javascript: $('*:contains("I am a simple string")').each(function(){ if($(this).children().length < 1) $(this).css("border","solid 2px red") }); return false;
หากคุณต้องการที่จะคว้าเพียงแค่"ผมสตริงง่าย" ก่อนอื่นให้ห่อข้อความในองค์ประกอบอย่างนั้น
$('*: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>'
)
)
});
แล้วทำสิ่งนี้
$('*[containsStringImLookingFor]').css("border","solid 2px red");
หากคุณต้องการโหนดที่ใกล้เคียงที่สุดกับข้อความที่คุณกำลังค้นหาคุณสามารถใช้สิ่งนี้:
$('*:contains("my text"):last');
สิ่งนี้จะใช้งานได้หาก HTML ของคุณมีลักษณะดังนี้:
<p> blah blah <strong>my <em>text</em></strong></p>
การใช้ตัวเลือกด้านบนจะค้นหา<strong>
แท็กเนื่องจากเป็นแท็กสุดท้ายซึ่งมีทั้งสตริงนั้น
<p>my text <b>my text</b></p>
- ลบบรรพบุรุษของ<b>
แท็กจะ แพ้คู่อื่น
ดูไฮไลต์ (ปลั๊กอิน jQuery)
เพียงเพิ่มคำตอบของ Tony Miller เนื่องจากทำให้ฉันได้ 90% สำหรับสิ่งที่ฉันกำลังมองหา แต่ก็ยังไม่ได้ผล การเพิ่ม.length > 0;
ไปยังจุดสิ้นสุดของรหัสทำให้สคริปต์ของฉันทำงานได้
$(function() {
var foundin = $('*:contains("I am a simple string")').length > 0;
});
foundin += '*';
ฟังก์ชั่นนี้ควรใช้งานได้ โดยทั่วไปจะทำการค้นหาแบบเรียกซ้ำจนกว่าเราจะได้รับรายการโหนดโหนด
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;
}