Elimde bir whatsapp çıktısı var. bunu bir şekilde düzenleyip baloncuklar içerisine alıp her iki tarafı da ayrı ayrı görselleştirdim. maksadım dışa aktarılan sohbeti html ortamında lokalde görüntüleyebilmek. fakat 131000 satıra tekabül ediyor konuşma. div etiketleriyle her mesajı ayrı ayrı tanımladım class ile de karşıya x kendime y diye sınıf belirttim. fakat açınca o kadar uzun bir konuşma çıkıyor ki bunu sayfa sayfa ayırmak istiyorum nasıl yaparım ?
son olarak köşeli parantezlere bir tanımlama yapmak mümkün mü örneğin tarih kısımları hep köşeli parantezle belirtilmiş. [01-01-2020 19:56] gibi bunları filtreleme yaparak sadece şu tarihteki konuşmaları göster şeklinde bir sistem de yapabilirim ama bunu nasıl başaracağımı bilmiyorum. yardımcı olabilecek arkadaşlara şimdiden teşekkür ederim .
bunu html ile çok yapamazsın aşağıdaki tool ile jsona çevirip uygun istediğin şekilde okunaklı hale getirirsin
github.com
/<div class=".*?">\s*<b>(.*?)<\/b>(.*?)\n+<\/div>\[([0-9]{1,2}[.][0-9]{1,2}[.][0-9]{4}) ([0-9]{1,2}:[0-9]{1,2}:[0-9]{1,2})\]/g
regexle ayrıştırmak istersen eğer;
grup 1 mesajı yazan kişi, grup 2 mesaj metni, grup 3 tarih, grup 4 saat..
Bi tane css class'ı yap, görevi bir div'i gizlemek olsun. Misal:
.hide { display: none; }
JS'te onscroll diye bir event var. Sayfana bu event için bir listener ekle. Kullanıcı her scroll yaptığında yazdığın fonksiyon çağırılacak. "document.body.scrollTop" ile kullanıcının sayfanın başıdan kaç px scroll yaptığını bulabilirsin. Buna göre x'inci div'i bul, hide class'ını kaldır, böylece görünür olsun artık. Twitter'ın falan şu scroll yaptıkça aşağından yeni şeyler çıkması olayını simüle etmiş olursun.
Search işi de benzer. Öncelikle tarihlerini div'lere attribute olarak vermen lazım. Misal: <div data-date="01-01-2020" >...</div> gibi.
Bi input koy arama için, kullanıcı tarihi girip "ara" tuşuna basınca document.getElementsByClassName('..') ile bütün div'leri al. "data-date" attribute'u senin verdiğin tarihe eşit olanlardan hide class'ını kaldır, olmayanlara ekle.
