ค้นหาสตริงข้อความโดยใช้ jQuery?


241

สมมติว่าหน้าเว็บมีสตริงเช่น "ฉันเป็นสตริงธรรมดา" ที่ฉันต้องการค้นหา ฉันจะใช้ JQuery ทำอย่างไร

คำตอบ:


327

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: ประกอบด้วย ("ฉันเป็นสตริงธรรมดา")')


12
@ โทนี่ฉันจะจัดการกับแค่ข้อความที่ตรงกันได้อย่างไรและไม่ใช่แค่ทั้ง parapgraph, div ฯลฯ ฯลฯ ?
Keith Donegan

12
ควรชี้ให้เห็นว่าเป็นกรณี ๆ ไป ผู้ใช้ชื่อ "ฉัน" เขียนสิ่งนี้ในหน้าเอกสาร jQuery: $ .expr [':']. icontain = function (obj, ดัชนี, เมตา, สแต็ก) {return (obj.textContent || obj.innerText || jQuery ( obj) .text () || '') .toLowerCase (). indexOf (meta [3] .toLowerCase ())> = 0; }; ตัวอย่าง: $ ("div: icontain ('John')"). css ("text-decoration", "underline");
Brandon Bloom

ใช้งานได้กับ json หรือไม่ ถ้าฉันต้องการกรองข้อความในค่า json
Chamilyan

5
สิ่งนี้จะไม่ทำงานหากโหนดข้อความมีตัวแบ่งบรรทัดเช่น "ฉันเป็นสาย \ n อย่างง่าย" โปรดทราบว่าตัวแบ่งบรรทัดจะไม่ถูกแสดงผลดังนั้นผู้ใช้จะไม่ทราบด้วยซ้ำว่าเกิดปัญหาที่ไหน วิธีแก้ปัญหาทั้งหมดนี้มีปัญหานี้ ดูjsfiddle.net/qPeAx
jesper

9
-1 ไม่ทำงาน มันจะส่งคืนโหนดหลักทั้งหมดในทรีคุณต้องการเพียงโหนดที่ต่ำที่สุด
TMS

51

โดยปกติตัวเลือก jQuery จะไม่ค้นหาภายใน "โหนดข้อความ" ใน DOM อย่างไรก็ตามหากคุณใช้ฟังก์ชั่น. เนื้อหา () โหนดข้อความจะถูกรวมไว้ดังนั้นคุณสามารถใช้คุณสมบัติ nodeType เพื่อกรองเฉพาะโหนดข้อความและคุณสมบัติ nodeValue เพื่อค้นหาสตริงข้อความ

    $ ('*', 'body')
        .andSelf ()
        .contents ()
        .filter (ฟังก์ชั่น () {
            กลับ this.nodeType === 3;
        })
        .filter (ฟังก์ชั่น () {
            // จับคู่เฉพาะเมื่อมี "สตริงธรรมดา" ที่ใดก็ได้ในข้อความ
            กลับ this.nodeValue.indexOf ('สตริงที่เรียบง่าย')! = -1;
        })
        .each (ฟังก์ชั่น () {
            // ทำอะไรกับสิ่งนี้ nodeValue
        });

8
หากต้องการชี้แจงอย่างที่โทนี่พูดถึงคุณสามารถใช้ตัวเลือก ": contain ()" เพื่อค้นหาภายในโหนดข้อความ แต่ jQuery จะไม่ส่งคืนโหนดข้อความแต่ละรายการในผลลัพธ์ (เพียงรายการองค์ประกอบ) แต่เมื่อคุณใช้. content () แล้ว jQuery จะส่งคืนทั้งองค์ประกอบและโหนดข้อความ สำหรับข้อมูลเพิ่มเติม: docs.jquery.com/Traversing/contents
BarelyFitz

5
.andSelf()ผมงงว่าทำไมคุณกำลังใช้ จากapi.jquery.com/andSelf : "วัตถุ jQuery รักษาสแต็คภายในที่ติดตามการเปลี่ยนแปลงของชุดองค์ประกอบที่ตรงกันเมื่อหนึ่งในวิธีการสำรวจเส้นทาง DOM เรียกว่าชุดองค์ประกอบใหม่จะถูกผลักลงบนสแต็กหาก องค์ประกอบชุดก่อนหน้าเป็นที่ต้องการเช่นกัน. andSelf () สามารถช่วยได้ " ฉันไม่เห็นบริบทก่อนหน้านี้ฉันทำอะไรหายไป
Alan H.

1
upvoted! ควรเป็นคำตอบที่ยอมรับได้เพราะมันกรองโหนดแม่ทั้งหมดซึ่งฉันคิดว่าเป็นความต้องการทั่วไปในสถานการณ์ส่วนใหญ่
LucaM

29

สิ่งนี้จะเลือกเฉพาะองค์ประกอบใบไม้ที่มี "ฉันเป็นสตริงธรรมดา"

$('*: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");

3
ฟังก์ชั่น. filter () จะมีประโยชน์มากกว่า. each () ที่นี่ ในความเป็นจริงคุณสามารถใส่ไว้ในตัวเลือกเดียว: "*: ประกอบด้วย ('blah'): empty"
nickf

2
#nickf -: ว่างเปล่าจะไม่เลือกโหนดข้อความที่มีข้อความ ดังนั้นหากโหนดข้อความมี "ฉันเป็นสตริงธรรมดา" มันจะถูกยกเว้น docs.jquery.com/Selectors/empty
Slim

2
ฉันรู้ว่าฉันมาสายนิดหน่อย แต่สิ่งนี้จะไม่เพิกเฉยต่อบล็อคข้อความใด ๆ ที่มีสตริงอยู่ที่ระดับบนสุด แต่มีเด็ก ๆ อยู่ด้วย? เช่น: <blockquote> ฉันเป็นสตริงธรรมดา <span style = "font-weight: bold;"> อยู่บนขอบ </span> </blockquote>
Ken Bellows

ฉันแค่อยากจะพูดถึงว่า "containStringImLookingFor" ไม่ใช่แอตทริบิวต์ HTML ที่ถูกต้อง กรุณาใช้สำหรับ HTML 5 "data-containStringImLookingFor" ไม่มีทางเพื่อใช้ HTML เวอร์ชันก่อนหน้านี้กว่า 5 เพื่อเพิ่มแอตทริบิวต์ที่กำหนดเองคือ ...
Snickbrack

17

หากคุณต้องการโหนดที่ใกล้เคียงที่สุดกับข้อความที่คุณกำลังค้นหาคุณสามารถใช้สิ่งนี้:

$('*:contains("my text"):last');

สิ่งนี้จะใช้งานได้หาก HTML ของคุณมีลักษณะดังนี้:

<p> blah blah <strong>my <em>text</em></strong></p>

การใช้ตัวเลือกด้านบนจะค้นหา<strong>แท็กเนื่องจากเป็นแท็กสุดท้ายซึ่งมีทั้งสตริงนั้น


1
ดูเหมือนจะใช้งานไม่ได้ ในหน้านี้ตัวอย่างเช่น *: contain ("the"): ผลตอบแทนสุดท้ายเพียง 1 องค์ประกอบ
bzlm

4
@bzlm: ไม่จำเป็นต้องระบุว่าเขาต้องการค้นหาหลายครั้ง
nickf

2
เอเอชเอ มีวิธีที่จะทำให้มันใช้ได้กับหลายเหตุการณ์หรือไม่? ฉันคิดว่ามันเป็นทางออกที่สง่างามมากขึ้นกว่าคนที่เกี่ยวข้องกับชนิดของโหน recursive ตรวจสอบ ฯลฯ
bzlm

1
วิธีเดียวที่ฉันคิดว่าจะได้รับโหนดทั้งหมด แต่ไม่ได้บรรพบุรุษทั้งหมดขึ้นบรรทัดจะวนรอบผลลบผู้ปกครองทั้งหมดแม้ว่าคุณจะมีปัญหาเช่น: <p>my text <b>my text</b></p>- ลบบรรพบุรุษของ<b>แท็กจะ แพ้คู่อื่น
nickf


7

เพียงเพิ่มคำตอบของ Tony Miller เนื่องจากทำให้ฉันได้ 90% สำหรับสิ่งที่ฉันกำลังมองหา แต่ก็ยังไม่ได้ผล การเพิ่ม.length > 0;ไปยังจุดสิ้นสุดของรหัสทำให้สคริปต์ของฉันทำงานได้

 $(function() {
    var foundin = $('*:contains("I am a simple string")').length > 0;
 });

จะเพิ่มคำใหม่ลงในสตริงที่พบได้อย่างไรฉันต้องการเพิ่มเครื่องหมายดอกจันในงานที่พบ
userAZLogicApps

@SaMolPP foundin += '*';
Pixelomo

2

ฟังก์ชั่นนี้ควรใช้งานได้ โดยทั่วไปจะทำการค้นหาแบบเรียกซ้ำจนกว่าเราจะได้รับรายการโหนดโหนด

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;
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.