Js Browser Konsol HTML Title Etiket Kopyalama

Javascript Tarayıcı Konsolunda HTML Title Etiketini bir düğme (Buton) yardımı ile Panoya Kopyalamak

Tarayıcı Konsolunda HTML Title Etiketini Panoya Kopyalama (Javascript)

HTML Sayfasındaki "Title" Niteliklerini Panoya Kopyalamak

Bazı durumlarda bir web sayfasındaki belirli HTML öğelerinin metinlerini toplamak ve panoya kopyalamak isteyebilirsiniz. Örneğin, bir ürün listesi sayfasında ürün adlarını almak için aşağıdaki basit bir çözümü kullanabilirsiniz.

Bugün epey.com da bir kaç monitör filtrelemek istedim çıkan sonuçları kopyalamak için bir kolaylık ararken aklıma javascript ile bunu yapabilirmiyim diye düşünürken ufak bir kaç satır kod yazarak istediğime erişebildim ve bu durumu sizinle paylaşmak istedim :)

Bu yazıda, title niteliğini kullanarak metinleri nasıl alabileceğinizi ve bir "Kopyala" düğmesiyle panoya kopyalayabileceğinizi göstereceğim.

HTML Örneği

Aşağıdaki gibi bir HTML yapınız olduğunu varsayalım:

<div class="resim cell">

<a href="https://www.epey.com/monitor/viewsonic-xg240r.html" class="urunresmi" title="ViewSonic XG240R Monitör">

<img src="https://resim.epey.com/151812/k_viewsonic-xg240r-16.jpg" alt="ViewSonic XG240R resim" />

</a>

</div>

Bu yapıda, title niteliğinde ürün adları bulunmaktadır.

JavaScript Çözümü

Aşağıdaki kod, bu HTML yapısındaki title niteliklerini alır ve bir "Kopyala" düğmesiyle panoya kopyalar.

// Tüm öğeleri seçin

const elements = document.querySelectorAll('a.urunresmi[title]');

// Title niteliğini bir diziye kaydedin

const titles = Array.from(elements).map(element => element.getAttribute('title'));

// Sonuçları konsola yazdırın

console.log(titles);

// Bir düğme oluştur

const copyButton = document.createElement('button');

copyButton.textContent = 'Kopyala';

copyButton.style.position = 'fixed'; // Sabit pozisyonda yerleştir

copyButton.style.bottom = '20px'; // Sayfanın altına 20px mesafede

copyButton.style.right = '20px'; // Sayfanın sağına 20px mesafede

copyButton.style.padding = '10px 20px'; // İç dolgu ekle

copyButton.style.backgroundColor = '#007BFF'; // Arka plan rengi (mavi)

copyButton.style.color = 'white'; // Yazı rengi

copyButton.style.border = 'none'; // Kenarlık kaldır

copyButton.style.borderRadius = '5px'; // Kenarları yuvarlat

copyButton.style.cursor = 'pointer'; // İmleç değişikliği

document.body.appendChild(copyButton);

// Düğmeye tıklama olayını ekle

copyButton.addEventListener('click', () => {

  const elements = document.querySelectorAll('a.urunresmi[title]');

  const titles = Array.from(elements).map(element => element.getAttribute('title'));

  if (titles.length > 0) {

    navigator.clipboard.writeText(titles.join('\n')).then(() => {

      alert('Metinler panoya kopyalandı!');

    }).catch(err => {

      console.error('Panoya kopyalama başarısız:', err);

    });

  } else {

    alert('Hiçbir metin bulunamadı!');

  }

});

Kodun İşleyişi

HTML Öğelerini Seçme: document.querySelectorAll('a.urunresmi[title]') ile, class="urunresmi" ve title niteliğine sahip <a> etiketlerini seçiyoruz.

title Niteliğini Alma: Seçilen öğelerin title değerlerini bir diziye kaydediyoruz.

Düğme Ekleme ve Panoya Kopyalama: Bir düğme oluşturup sayfaya ekliyoruz. 

Düğmeye tıklandığında, navigator.clipboard.writeText ile metinleri panoya kopyalıyoruz.

Sonuç

Bu yöntemle, bir web sayfasındaki belirli nitelikleri kolayca alabilir ve panoya kopyalayabilirsiniz. Bu çözüm özellikle e-ticaret sitelerinde ürün adlarını toplamak veya benzer işlemler için oldukça kullanışlıdır.

Örnek Çıktı:

Eğer yukarıdaki HTML yapısını kullandıysanız, panoya şu şekilde bir çıktı kopyalanacaktır:

ViewSonic XG240R Monitör

Dell S2419HGF Monitör

Asus VG248QZ Monitör

Acer XB240HBbmjdpr (UM.FX0EE.B01) Monitör

AOC G2460FQ Monitör

...

Kodunuzu çalıştırdığınızda, sağ alt köşede mavi bir "Kopyala" düğmesi göreceksiniz.

Tıkladığınızda, metinler panoya kopyalanacak ve bir uyarı mesajı görünecektir.

Eğer kodu kullanırken herhangi bir sorun yaşarsanız, yorumlarda bana ulaşabilirsiniz! :)

Javascript Browser Konsolunda HTML Title Tag Panoya Kopyalama