Mark işaretleme sarı renkli
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.jsdelivr.net/mark.js/8.6.0/jquery.mark.min.js" ></script> <style> mark { padding: 0; background-color:yellow; } mark.secondary { padding: 0; background-color: orange; } </style> </head> <body> <input type="text" name="keyword"> <div class="context"> Korkma, sönmez bu şafaklarda yüzen al sancak; <br> Sönmeden yurdumun üstünde tüten en son ocak. <br> O benim milletimin yıldızıdır, parlayacak; <br> O benimdir, o benim milletimindir ancak. <br> <br> Çatma, kurban olayım çehreni ey nazlı hilâl! <br> Kahraman ırkıma bir gül… ne bu şiddet bu celâl? <br> Sana olmaz dökülen kanlarımız sonra helâl, <br> </div> <script> $(function() { var mark = function() { // Read the keyword var keyword = $("input[name='keyword']").val(); // Remove previous marked elements and mark // the new keyword inside the context $(".context, .context2").unmark({ done: function() { $(".context, .context2").mark(keyword); } }); }; $("input[name='keyword']").on("input", mark); }); </script> </body> </html> |