Javascript'te HTML'yi Düz Metne Dönüştürme

click fraud protection
...

HTML öğelerini düz metne dönüştürmek için JavaScript kullanın.

JavaScript komut dosyası diliyle yapabileceğiniz en yararlı şeylerden biri, bir HTML belgesinin Belge Nesne Modeli'ni (veya "DOM") işlemek ve onunla çalışmaktır. Bir HTML belgesinin DOM'si, o belgenin içeriğini temsil eden bir kuraldır. Web tarayıcılarının ve JavaScript gibi komut dosyası dillerinin, bu belgeyi oluşturan çeşitli öğelerle etkileşime girmesi için bir yol sağlar. JavaScript ve bir web sayfasının DOM'sini kullanarak HTML'yi kolayca düz metne dönüştürebilirsiniz.

Aşama 1

HTML belgenizin HEAD bölümüne bir SCRIPT bildirimi ekleyin. SCRIPT etiketi, JavaScript gibi bir istemci tarafı komut dosyasını tanımlar. SCRIPT etiketinizin "type" özniteliğinin "text/javascript" olarak ayarlanması gerekir, böylece SCRIPT bildiriminin tamamı aşağıdaki gibi okunmalıdır: (JavaScript kodunun iki etiket arasında olduğu yer).

Günün Videosu

Adım 2

Parametre olarak bir dize alan bir JavaScript işlevi tanımlayın. Bu dize parametresi, düz metne dönüştüreceğiniz HTML'yi içerir.

Aşama 3

"createElement()" yöntemini kullanarak JavaScript işlevinizin içinde geçici bir DIV öğesi oluşturun.

4. Adım

İşlevinizin dize parametresini geçici DIV'nizin "innerHTML" özniteliğine atayın.

Adım 5

İşlevinizde geçici bir dize değişkeni oluşturun.

6. Adım

"textContent" ve "innerText" niteliklerini kullanarak geçici DIV'nizin düz metin içeriğini alın ve onu geçici dize değişkeninize atayın. Tarayıcılar arası uyumluluk sorunları nedeniyle, bazılarında hem "textContent" hem de "innerText" tanımlanacaktır. web tarayıcıları ve diğerlerinde tanımsız, ancak biri veya diğeri tüm ana sürümlerin tüm sürümlerinde tanımlanacak tarayıcılar.

7. Adım

Bir "return" ifadesi kullanarak geçici dizginizin tuttuğu değeri döndürün. Bu, dönüştürülmüş HTML'nizin düz metin değerini döndürür.

Tarayıcılar arası uyumluluğu kontrol etmek ve işlevinizde “textContent” veya “innerText” kullanıp kullanmamaya karar vermek için IF-THEN deyimlerini kullanmak yerine, geçici DIV öğenizin düz metin değerini geçici dize değişkeninize aşağıdaki gibi atayın: var tmpString = tmpDiv.textContent || tmpDiv.innerText.