قم بتمييز النص الذي تم البحث عنه باستخدام Angular js و jQuery و Css

https://stackoverflow.com//questions/11685473

12-12-2019
|

سؤال

أنا أستخدم هذا البرنامج المساعد jquery للبحث عن النص:"http://code.google.com/p/jquery-highlight/downloads/list "..

لكن أنا غير قادر على لف هذا الرمز في Angular JS ، أقصد أن أقول "أنا غير قادر على كتابة توجيه لاستدعاء قابس jQuery هذا" ... !!!

محدث :

نفس المشاركة في مجموعة جوجل:

هذه هي المجموعة

المحلول

تحديث:هذا مجرد مثال.يمكنك التعديل حسب احتياجاتك.

لا تحتاج إلى مقارنة RegExp لذلك.دعونا نجعل الاستخدام البسيط لجافا سكريبت split() وظيفة

1) تحديد نمط لتسليط الضوء.

.srchslctn{
    background-color: yellowgreen;
    color: red;
}

2) نموذج HTML الخاص بك

<body>
    <div>
        <div id="serach-Paragraph">
            Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
        </div>
        <input type="button" id="h" value="Highlight"/>
        <div id="target"></div>
    </div>
</body>

3) جافا سكريبت

            $(document).ready(function(){
            $("#h").on('click',function(){
                highlight(); 
            });
        });

        function highlight(){
            $("#target").empty();
            var mainString = $("#serach-Paragraph").html();
            var searchString = "ipsum";
            var arr = mainString.split(searchString);
            var len = arr.length;
            var finalString="";
            for(var i=0;i<arr.length;i++){

                finalString+=arr[i];

                if(i<len-1){
                    finalString+='<span class="srchslctn">'+searchString+'</span>';
                }
            }
            $("#target").html(finalString);
        }

هذا كل شيء....

توضيح -: split() سوف يكسر targetString وفقًا لسلسلة البحث الخاصة بك.وهذا مشابه لكيفية استرجاع القيم المفصولة بفواصل.الشيء الوحيد هو في هذه الحالة أن سلسلة البحث الخاصة بك تعمل مثل الفاصلة :)

ثم احتفظ arr[0] كما هو.قم بتمييز سلسلة البحث الخاصة بك وألحقها بها arr[0].ألحق arr[1] إلى النتيجة المذكورة أعلاه وهكذا.

بسيط....

النص الذي تم البحث عنه كما هو الحال في أنه يتعين عليك فقط تمييز الجزء المطابق مع الاحتفاظ ببقية النص كما هو؟

نصائح أخرى

يمكنك استخدام تسليط الضوء الزاوي UI مرشح.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow