g u t x .com.tr İpek yolu - Çin'i anlamaya götürürüm

Ön uç geliştiricilerin bilmesi gereken 6 süper kolay normal ifade

Tam metin 4719 Kelimeler, tahmini öğrenme süresi 14 dakika

Kaynak: Pexels

Düzenli ifadeler, programcılar için önemli bir araç haline geldi. Neredeyse tüm popüler programlama dilleri, aşağıdaki nedenlerle normal ifadeleri destekler: Normal ifadeler, geliştiricilere düzinelerce kod satırı gerektiren görevleri hızlı bir şekilde gerçekleştirmeleri için güçlü araçlar sağlar.

Bu makale temel olarak, ön uç geliştiricilerin sıklıkla karşılaştığı altı metin işleme ve işleme görevini inceler ve normal ifadelerin bu süreci nasıl basitleştirdiğini daha iyi anlar. Ancak bu, normal ifadelerin potansiyelinin yalnızca yüzeyini çizdi.

1. URL'yi bağlantıya dönüştürün

Metinde bir veya daha fazla URL olduğunu ve bunların hiçbirinin HTML bağlantı öğesi olmadığını, dolayısıyla tıklanamayacaklarını varsayalım. Bir url'yi otomatik olarak bağlantıya dönüştürmek için, önce URL'yi bulmanız ve ardından < a > Href özelliği her URL'yi etikete yükler < a > < / a > :

const str = "Daha fazla bilgi için https://en.wikipedia.org/ adresini ziyaret edin."; str.replace (/ \ b (https? | ftp | dosya): \ / \ / \ S + / g, ' < ahref = "$" > $ < / a > '); // = > "Ziyaret etmek < ahref = "https://en.wikipedia.org/" > https://en.wikipedia.org/ < / a > daha fazla bilgi için."

Not: Bu normal ifadeyi kullanırken dikkatli olun, çünkü noktalama işaretiyle biten URL'lerle eşleşmez ve daha karmaşık URL'lerle eşleşmeyebilir.

İlkesine bir göz atalım:

· \ B "Kelime sınırları" adı verilen konumlarla eşleşir.

· (Https? | Ftp | dosya), "https", "http" veya "ftp" veya "dosya" karakterleriyle eşleşir

·: İki nokta karakterini tam anlamıyla eşleştirin

· \ /, Eğik çizgi karakterleriyle kelimenin tam anlamıyla eşleşir

· \ S, boşluk dışında tek bir karakterle eşleşir

· + Önceki öğeyi bir veya daha fazla eşleştirin

· Eğik çizgi veya kelime karakterlerini eşleştirin. Bu olmadan, normal ifade, URL'nin sonundaki herhangi bir noktalama işaretiyle eşleşecektir.

İlk eşleşmeden sonra durmak yerine tüm oluşumlarla eşleşecek g komutu düzenli ifade motoru

· $ Replace () öğesinin ikinci parametresinde, eşleşen alt dizeyi değiştirilen dizeye ekleyin

2. Yinelenen kelimeleri silin

Makalelerin ve eğitimlerin gereksiz tekrarlanan kelimeler içermesi alışılmadık bir durum değildir. Profesyonel yazarlar bile bu hataları düzeltmelidir. Google Haberler'de "the" yi aradığınızda, yüzlerce tanınmış haber kuruluşunun makalelerinde "the" yi tekrarladığını göreceksiniz. Neyse ki, normal ifadeler bu sorunu bir satır kodla çözebilir:

const str = "Bu cümlede çift kelime var."; str.replace (/ \ b (\ w +) \ s + \ 1 \ b / gi, '$ 1'); // = > "Bu cümlede çift kelime var."

· \ B "Kelime sınırı" konumunda eşleşir (ASCII harfleri, sayıları veya alt çizgileri takip eden veya önceki konum).

· \ W kelime karakterleriyle eşleşir (ASCII harfler, sayılar veya alt çizgiler)

· + Önceki öğeyi bir veya daha fazla eşleştirin

· \ S, boşluk karakterleriyle eşleşir

· + Birden fazla boş karakter içeren tekrarlanan kelimeleri algılayabilmek için önceki öğeyi bir veya daha fazla eşleştirin

· \ 1 Geri referansın ve eşleşen metnin, ilk parantez çiftindeki eşleşen metinle aynı olup olmadığı

· \ B kelime sınırlarıyla eşleşir

İlk eşleşmeden sonra durmak yerine tüm oluşumlarla eşleşecek g komutu düzenli ifade motoru

Aramayı büyük / küçük harfe duyarlı hale getiriyorum (büyük / küçük harf farklılıklarını yok sayıyorum)

· $ 1, ikinci parantezin ikinci parametresindeki ilk parantez çiftine eşleşen metni ekler ()

3. Geçersiz karakterleri dosya adlarından kaldırın

İndirilecek dosya sağlanırken dosya adına belirli karakterler eklenmemelidir. Örneğin, Windows işletim sisteminde aşağıdaki karakterler dosya adlarında geçersizdir ve silinmeleri gerekir:

· < (Daha az)

· > (daha fazla)

·: (Kolon)

· " (İkili alıntı)

· / (Eğik çizgi)

· \ (Ters eğik çizgi)

· | (Dikey çizgi)

·? (Soru işareti)

· * (Yıldız)

Geçersiz karakterleri kaldırmak için normal ifadeleri kullanmak çok basittir. Bir örneğe bakalım:

const str = "https://en.wikipedia.org/"; str.replace (/ + / g, ''); // = > "httpsen.wikipedia.org"

, Karakter sınıfı olarak adlandırılır ve köşeli parantezler arasında bir karakterle eşleşebilir. Bu nedenle, tüm geçersiz karakterleri içine koyarak ve normal ifadenin sonuna bir genel (g) bayrağı ekleyerek, bu karakterler dizeden etkin bir şekilde kaldırılabilir.

Karakter sınıflarında ters eğik çizginin özel bir anlamı olduğunu ve başka bir ters eğik çizgiyle kaçınılması gerektiğini unutmayın: \. Operatör + aynı anda geçersiz karakter dizilerini değiştirmek için karakter sınıfını tekrarlayın, bu da performansı artırmaya yardımcı olur. Sonucu etkilemeden ihmal edilebilir.

Geçersiz bir karakteri başka bir karakterle değiştirmek istemediğiniz sürece, replace () yönteminin ikinci parametresinin boş bir dize olması gerektiğini unutmayın.

Ayrıca, Windows tarafından çeşitli görevler için dahili olarak kullanılan ve dosya adları olarak izin verilmeyen birkaç ayrılmış ad vardır. Ayrılmış isimler aşağıdaki gibidir:

CON, PRN, AUX, NUL, COM1, COM2, COM3, COM4, COM5, COM6, COM7, COM8, COM9, LPT1, LPT2, LPT3, LPT4, LPT5, LPT6, LPT7, LPT8 veLPT9

Ayrılmış adı kaldırmak için aşağıdaki kodu çalıştırın:

str.replace (/ ^ (CON | PRN | AUX | NUL | COM1 | COM2 | COM3 | COM4 | COM5 | COM6 | COM7 | COM8 | COM9 | LPT1 | LPT2 | LPT3 | LPT4 | LPT5 | LPT6 | LPT7 | LPT8 | LPT9 ) $ / i, 'dosya');

Temel olarak, bu kod, normal ifade motoruna str'deki karakterleri değiştirme talimatı verir (dikey çizgi karakteri (|) ile ayrılmış sözcüklerden birini oluşturuyorsa). Bu örnekte ikinci parametre olarak boş bir dize kullanamazsınız çünkü dosyanın adı yoktur.

Dize herhangi bir ek karakter içeriyorsa, değiştirilmeyeceğini unutmayın. Örneğin, "con" değiştirilecek, ancak geçerli bir dosya adı olan "uyum" değişmeyecek. Bu, normal ifadelerde ^ ve $ kullanılarak elde edilir. ^ Eşleştirilecek dizeden önce başka karakter olmadığından emin olmak için dizenin başlangıcını eşleştirin. $ Dizenin sonuyla eşleşir.

Normal ifadeyi daha kompakt bir şekilde yazmak için karakter sınıflarını da kullanabilirsiniz:

str.replace (/ ^ (CON | PRN | AUX | NUL | COM | LPT) $ / i, 'dosya');

1-9 arası maçlar

Kaynak: Pexels

4. Birden fazla boşluğu tek bir boşlukla değiştirin

Web sayfası oluşturulduğunda, tekrarlanan boş karakterler tek bir boşluk olarak görüntülenecektir. Ancak, bazen kullanıcı girişini veya diğer verileri temizlemek ve tekrarlanan boşlukları tek boşluklarla değiştirmek gerekir. Aşağıdakiler, normal ifadeler kullanarak bunu nasıl başaracağınızı gösterecektir:

const str = "Fikirlerim değişmiş olabilir, ancak haklı olduğum gerçeği değil."; // Ashleigh Brilliantstr.replace (/ \ s \ s + / g, ''); // = > "Fikirlerim değişmiş olabilir, ancak haklı olduğum gerçeği değil."

Normal ifade yalnızca iki meta karakter, bir operatör ve bir belirteç içerir:

· \ S; ASCII alanı, sekme, satır besleme, satır başı, dikey sekme ve form satırı beslemesi dahil olmak üzere tek bir boş karakterle eşleşir

· \ S yine tek bir boş karakterle eşleşir

· + Önceki öğeyi bir veya daha fazla eşleştirin

İlk eşleşmeden sonra durmak yerine tüm oluşumlarla eşleşecek g komutu düzenli ifade motoru

Sonuç, en az iki kez yinelenen tüm boşluk karakterlerini değiştirmektir. Yukarıdaki örnekteki sonucun başında silinmesi gereken boş bir karakter olduğuna dikkat edin. Bunu yapmak için, basitçe ifadenin sonuna trim () işlevini ekleyin:

str.replace (/ \ s \ s + / g, ''). trim (); // = > "Fikirlerim değişmiş olabilir, ancak haklı olduğum gerçeği değil."

Unutmayın, bu kod, ASCII boşlukları, sekmeler, satır beslemeleri, satır başları, dikey sekmeler ve form satırı beslemeleri dahil her tür beyaz boşluk karakterini değiştirmek için boşluk (U + 0020) karakterleri kullanır. Bu nedenle, satır başı, sekme karakterinden hemen sonra gelirse, bunlar boşlukla değiştirilir. Amaç bu değilse ve yalnızca aynı tür boşluğu değiştirmek istiyorsanız, aşağıdaki kodla değiştirebilirsiniz:

str.replace (/ (\ s) \ 1 + / g, '$ 1'). trim ();

\ 1 bir geri referanstır ve ilk parantez (\ ler) çiftindeki eşleşen karakterlerle eşleşir. Parantez içinde eşleşen karakterleri ekleyen replace () öğesinin ikinci parametresinde bunları değiştirmek için $ 1 kullanabilirsiniz.

5. Belirli kelimeleri içeren cümleleri bulun

Belli bir kelimeyi içeren metindeki tüm cümleleri eşleştirmek istediğinizi varsayalım. Ya da arama sonuçlarında bu cümleleri vurgulamak veya metinden çıkarmak istersiniz. Normal ifade /*\bword\b*.?/gi yukarıdaki gereksinimleri karşılayabilir. Aşağıdaki ilkedir:

const str = "Elma ağacı Orta Asya'da ortaya çıkmıştır. Dünya çapında yetiştirilmektedir. Elma yaz veya sonbaharda olgunlaşır."; // en.wikipedia.org/wiki/Apple// "elma" kelimesini içeren cümleleri bulun str.match (/*\bapple\b*.?/gi);// = >

Aşağıdakiler, düzenli ifadeyi aşamalı olarak inceleyecektir:

·.,! Ve? Dışındaki tüm karakterleri eşleştirin

· * Önceki öğenin sıfır veya daha fazla dizisiyle eşleşir

· \ B "Kelime sınırı" konumunda eşleşir (ASCII harfleri, sayıları veya alt çizgileri takip eden veya önceki konum).

Apple, karakterleri tam anlamıyla eşleştirir (büyük / küçük harfe duyarlı olduğundan, i etiketi normal ifadenin sonuna eklenir)

· \ B kelime sınırlarıyla eşleşir

·.,! Ve? Dışındaki tüm karakterleri eşleştirin

· * Önceki öğenin sıfır veya daha fazla dizisiyle eşleşir

·. Satırsonu hariç tüm karakterlerle eşleşir

·? Önceki öğe sıfırla veya bir oluşumla eşleşir

İlk eşleşmeden sonra durmak yerine tüm oluşumlarla eşleşecek g komutu düzenli ifade motoru

· Arama durumunu duyarsız hale getiriyorum

İpucu: Kod tabanından bileşenleri "almak" için Bit (Github) kullanın ve aşamalı olarak UI bileşen kitaplığını oluşturun. Tutarlı UI, hızlı geliştirme ve sınırsız işbirliği elde etmek için ekiple birlikte UI bileşen kitaplığını kullanın. Yeniden kullanılabilir bileşenleri herhangi bir projeye kolayca aktarın, depolarda değişiklikleri senkronize etmek için kullanın ve güncelleyin.

Örnek: bit.dev'de paylaşılan React bileşenlerini arayın

6. Kullanıcı girişini alfasayısal karakterlerle sınırlayın

Web geliştirmedeki yaygın bir görev, kullanıcı girişini alfasayısal karakterlerle (A-z, A-z ve 0-9) sınırlamaktır. Bu görevi gerçekleştirmek için normal ifadeleri kullanmak çok basittir: İzin verilen karakter aralığını tanımlamak için bir karakter sınıfı kullanın ve ardından tekrarlanabilecek karakter sayısını belirtmek için buna nicelik belirteci ekleyin:

const input1 = "John543"; const input2 = ":-)"; / ^ + $ / i.test (input1); // doğru / ^ + $ / i.test (input2); // yanlış

Not: Bu normal ifade yalnızca İngilizce için geçerlidir ve aksanlı harflerle veya diğer dillerdeki harflerle eşleşmez.

Aşağıdaki ilkedir:

· ^ Dizenin başlangıcıyla eşleşir. Eşleştirilecek dizeden önce başka karakter olmadığından emin olun.

· A ve Z arasındaki karakterleri veya 0 ile 9 arasındaki karakterleri eşleştirin. Bu büyük / küçük harfe duyarlı olduğundan, i işareti normal ifadenin sonuna eklenebilir. Alternatif olarak işaretsiz kullanılabilir.

· + Önceki öğeyle bir veya daha fazla kez eşleşir, bu nedenle giriş öğesinin en az bir boş olmayan alfasayısal karakter içermesi gerekir, aksi takdirde eşleşme başarısız olur. Alanı isteğe bağlı yapmak istiyorsanız, * nicelik belirtecini kullanabilirsiniz, nicelik belirtecinin önceki öğeyle kaç kez eşleştiği 0'dan büyük olmalıdır.

$ Dizenin sonuyla eşleşir.

Kaynak: Pexels

Normal ifadelerde ustalaşmak için zaman ayırmak kesinlikle değerli bir yatırımdır çünkü kodlama sırasında karşılaşılan çeşitli sorunları çözmeye yardımcı olur.

Umarım bu makale sizin için yararlıdır!