JQuery का उपयोग करके टेक्स्ट स्ट्रिंग ढूंढें?


241

मान लें कि एक वेब पेज में एक स्ट्रिंग है जैसे कि "मैं एक साधारण स्ट्रिंग हूं" जिसे मैं खोजना चाहता हूं। मैं इस बारे में JQuery का उपयोग कैसे करूँगा?

जवाबों:


327

jQuery में विधि शामिल है। यहाँ आप के लिए एक टुकड़ा है:

<script type="text/javascript">
$(function() {
    var foundin = $('*:contains("I am a simple string")');
});
</script>

ऊपर चयनकर्ता किसी भी तत्व का चयन करता है जिसमें लक्ष्य स्ट्रिंग शामिल है। फाउंडिन एक jQuery ऑब्जेक्ट होगा जिसमें कोई भी मिलान किया गया तत्व होता है। API जानकारी यहाँ देखें: https://api.jquery.com/contains-selector/

'*' वाइल्डकार्ड पर ध्यान देने वाली एक बात यह है कि आपको अपने HTML तत्वों सहित सभी तत्व मिल जाएंगे, जो आप नहीं चाहते। यही कारण है कि jQuery और अन्य स्थानों पर अधिकांश उदाहरण $ का उपयोग करते हैं ('div: होता है ("मैं एक साधारण स्ट्रिंग हूँ")'


12
@ क्या, मैं कैसे सिर्फ मेल पाठ और सिर्फ पूरे parapgraph, div आदि आदि जोड़ तोड़ के बारे में जाना होगा?
कीथ डोनेगन

12
इंगित करना चाहिए कि यह मामला संवेदनशील है। "Me" नाम के एक यूजर ने jQuery डॉक्स पेज पर यह लिखा है: $ .expr [':]। Icontains = function (obj, index, meta, stack) {return (obj.textContent || obj.nerText)? JQuery (|| obj) .text () || '') .toLowerCase ()। indexOf (मेटा [3] .toLowerCase ()) = = 0; }; उदाहरण: $ ("div: icontains ('जॉन')")। Css ("टेक्स्ट-डेकोरेशन", "अंडरलाइन");
ब्रैंडन ब्लूम

क्या यह काम करता है? क्या होगा यदि मैं किसी पाठ को एक मान में फ़िल्टर करना चाहता हूं?
चामिलन

5
यह काम नहीं करेगा अगर टेक्स्ट नोड में लाइन ब्रेक जैसे। "मैं एक साधारण \ n स्ट्रिंग हूँ"। ध्यान दें कि लाइन ब्रेक प्रदान नहीं किया जाएगा ताकि उपयोगकर्ता को यह भी पता न चले कि समस्या कहां है। इन सभी समाधानों में यह समस्या है। Jsfiddle.net/qPeAx
jesper

9
-1, काम नहीं करता है। यह पेड़ में सभी मूल नोड्स लौटाता है, आप केवल सबसे कम चाहते हैं।
टीएमएस

51

आम तौर पर jQuery के चयनकर्ता डोम में "टेक्स्ट नोड्स" के भीतर नहीं खोजते हैं। हालाँकि यदि आप .contents () फ़ंक्शन का उपयोग करते हैं, तो टेक्स्ट नोड्स शामिल किए जाएंगे, फिर आप केवल टेक्स्ट नोड्स को छानने के लिए नोड टेक्स्ट प्रॉपर्टी और टेक्स्ट स्ट्रिंग को खोजने के लिए नोडवैल्यू प्रॉपर्टी का उपयोग कर सकते हैं।

    $ ('*', 'बॉडी')
        .andSelf ()
        .contents ()
        .filter (function () {
            इसे वापस करें।
        })
        .filter (function () {
            // केवल तब होता है जब पाठ में कहीं भी 'सरल स्ट्रिंग' होता है
            इसे वापस करें।
        })
        .प्रत्येक (function () {
            // इसके साथ कुछ करें
        });

8
स्पष्ट करने के लिए, जैसा कि टोनी ने उल्लेख किया है कि आप पाठ नोड्स के भीतर खोज करने के लिए ": समाहित है ()" चयनकर्ता का उपयोग कर सकते हैं, लेकिन jQuery परिणामों में व्यक्तिगत पाठ नोड्स (केवल तत्वों की एक सूची) नहीं लौटाएगा। लेकिन जब आप .contents () का उपयोग करते हैं, तो jQuery तत्व और पाठ नोड्स दोनों लौटाता है। अधिक जानकारी के लिए: docs.jquery.com/Traversing/contents
BarelyFitz

5
मैं हैरान हूं कि आप क्यों इस्तेमाल कर रहे हैं .andSelf()। से api.jquery.com/andSelf : "jQuery वस्तुओं एक आंतरिक ढेर है कि तत्वों के मेल नहीं खाते सेट करने के लिए परिवर्तनों का ट्रैक रखता बनाए रखने के जब डोम ट्रेवर्सल तरीकों में से एक कहा जाता है, तत्वों का नया सेट ढेर पर धकेल दिया जाता है।। तत्वों के पिछले सेट के रूप में अच्छी तरह से वांछित है। और (मदद कर सकते हैं)। " मुझे कोई पिछला संदर्भ नहीं दिखाई दे रहा है, मैं क्या याद कर रहा हूं?
एलन एच।

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 () की तुलना में अधिक उपयोगी होगा। वास्तव में, आप इसे वास्तव में एक चयनकर्ता में रख सकते हैं: "*: ('ब्ला'): खाली"
निक नेम

2
#nickf -: खाली नॉट एक टेक्स्ट नोड का चयन करता है जिसमें टेक्स्ट होता है। इसलिए यदि टेक्स्ट नोड में "मैं एक साधारण स्ट्रिंग हूं" इसे बाहर रखा गया है। docs.jquery.com/Selectors/empty
पतला

2
मुझे पता है कि मैं यहाँ थोड़ी देर से हूँ, लेकिन क्या यह किसी भी टेक्स्ट ब्लॉक को अनदेखा नहीं करेगा जहाँ स्ट्रिंग शीर्ष स्तर पर मौजूद है, लेकिन इसके भीतर बच्चे हैं? उदाहरण: <blockquote> मैं एक साधारण स्ट्रिंग हूँ <span style = "font-weight: bold;"> EDGE पर रहते हैं </ span> </ blockquote>
केन बेलोज़

मैं केवल यह उल्लेख करना चाहता हूं कि "इसमें शामिल हैमैंस्ट्रिंगलाइकफोरफोर" एक वैध एचटीएमएल-गुण नहीं है। कृपया एचटीएमएल 5 के लिए उपयोग करें "डाटा-सम्‍मिलित स्ट्रिंगमूगलिंगफोर"। HTML संस्करण के लिए 5 से पहले कस्टम गुण जोड़ने के लिए कोई रास्ता नहीं है ...
Snickbrack

17

यदि आप अपने द्वारा खोजे जा रहे पाठ के निकटतम नोड चाहते हैं, तो आप इसका उपयोग कर सकते हैं:

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

यदि आपका HTML ऐसा दिखता है तो भी यह काम करेगा:

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

उपरोक्त चयनकर्ता का उपयोग करने से <strong>टैग मिल जाएगा , क्योंकि यह अंतिम टैग है जिसमें वह संपूर्ण स्ट्रिंग है।


1
यह काम नहीं लगता है। इस पृष्ठ पर, उदाहरण के लिए, *: ("the"): अंतिम रिटर्न केवल 1 तत्व है।
bzlm

4
@bzlm: अच्छी तरह से यह जरूरी नहीं था कि वह कई घटनाओं को खोजना चाहता था।
निक

2
अहा। क्या यह कई घटनाओं के लिए काम करने का एक तरीका है? मुझे लगता है कि यह पुनरावर्ती नोड प्रकार की जाँच आदि को शामिल करने वालों की तुलना में अधिक सुंदर समाधान है
bzlm

1
एक ही तरीका है कि मैं सभी नोड्स प्राप्त करने के लिए सोच सकता हूं, लेकिन सभी पूर्वजों को लाइन में नहीं आना परिणाम के माध्यम से लूप होगा, सभी माता-पिता को हटा दें, हालांकि आपको समस्याएं हो सकती हैं, जैसे: <p>my text <b>my text</b></p>- <b>टैग के पूर्वजों को हटाना अन्य मैच हार गए
निक


7

बस टोनी मिलर के जवाब में जोड़ने के रूप में यह मुझे 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;
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.