30 Hyödylliset Regex-koodinpätkät Web-kehittäjille

Säännölliset lausekkeet ovat tehokas työkalu, jonka pitäisi olla jokaisessa kehittäjän työkaluvyöhykkeessä. Ne voivat sovittaa merkkijonoon erittäin monimutkaisten parametrien perusteella, mikä voi säästää paljon aikaa dynaamisten sivustojen rakentamisessa.

Web-kehittäjät kohtaavat erilaisia ​​tehtäviä kuin ohjelmistokehittäjät, mutta monet samoista koodin perusteista ovat edelleen olemassa. Säännölliset lausekkeet (tai. \ T regex) on a jyrkkä alkuoppimiskäyrä, mutta he voivat olla valtavasti voimakas, kun sitä käytetään oikein.

Kovin osa on oppia syntaksi ja oppia kirjoittamaan oman regex-koodin tyhjästä. Ajan säästämiseksi olen järjestänyt 30 erilaista regex-koodinpätkä, jotka voit sisällyttää kehityshankkeisiin. Ja koska regex ei ole vain yhdellä kielellä, voit käyttää näitä katkelmia mihin tahansa JavaScript että PHP tai pytonkäärme.

1. Salasanan vahvuus

^ (? =. * [AZ]. * [AZ]) (? =. * [! @ # $ & *]) (? =. * [0-9]. * [0-9]) (? = . * [az]. * [az]. * [az]). 8 $

Salasanan vahvuuden tarkistaminen on usein subjektiivista, joten absoluuttista oikeaa vastausta ei ole. Mutta minusta tuntuu, että tämä regex-pätkä on hyvä lähtökohta, jos et halua kirjoittaa omaa salasanan vahvuuden tarkistinta tyhjästä. (Lähde)

2. Heksadesimaaliväri

# ([a-fA-F] | [0-9]) 3, 6

Verkkosuunnittelun ala on kaikkialla läsnä hex-värikoodeilla. Tätä regex-katkelman avulla voidaan vetää heksakoodisovelluksia mihin tahansa merkkijonoon mihin tahansa tarkoitukseen. (Lähde)

3. Vahvista sähköpostiosoite

/[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]2,4/igm

Yksi yleisimmistä kehittäjän tehtävistä on tarkistaa, onko merkkijono muotoiltu sähköpostiosoitteen tyyliin. Tämän tehtävän suorittamiseksi on monia eri vaihtoehtoja, joten tämä SitePoint-linkki tarjoaa kaksi erillistä koodinpätkää sähköpostin syntaksin tarkistamiseksi merkkijonoa vastaan. (Lähde)

4. IPv4-osoite

/\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.)3 (?: 25 [0-5] | 2 [0-4] [0-9] | [01]? [0-9] [0-9]?) \ b /

Samoin kuin sähköpostiosoite on tyypillinen IP-osoite, jota käytetään tunnistamaan tietty tietokone, joka käyttää Internetiä. Tämä säännöllinen lauseke tarkistaa merkkijonon, jos se seuraa IPv4-osoitteen syntaksia. (Lähde)

5. IPv6-osoite

(([0-9a-fA-F] 1,4:) 7,7 [0-9a-fA-F] 1,4 | ([0-9a-fA-F] 1 , 4:) 1,7: | ([0-9a-fA-F] 1,4:) 1,6: [0-9a-fA-F] 1,4 | ([0-9a-fA-F] 1,4:) 1,5 (: [0-9a-fA-F] 1,4) 1,2 | ([0-9a fa-F] 1,4:) 1,4 (: [0-9a-fA-F] 1,4) 1,3 | ([0-9a-fA-F] 1,4:) 1,3 (: [0-9a-fA-F] 1,4) 1,4 | ([0-9a-fA-F] 1,4 :) 1,2 (: [0-9a-fA-F] 1,4) 1,5 | [0-9a-fA-F] 1,4: ((: [0 -9a-fA-F] 1,4) 1,6) |: ((: [0-9a-fA-F] 1,4) 1,7 |:) | fe80: (: [0-9a-fA-F] 0,4) 0,4% [0-9a-zA-Z] 1, |: :( fFFF (: 0 1,4) 0,1:) 0,1 ((25 [0-5] | (2 [0-4] | 1 0,1 [0-9]) 0,1 [0-9 ]) \.) 3,3 (25 [0-5] | (2 [0-4] | 1 0,1 [0-9]) 0,1 [0-9]) | ([0-9a-fA-F] 1,4:) 1,4: ((25 [0-5] | (2 [0-4] | 1 0,1 [0-9 ]) 0,1 [0-9]) \.) 3,3 (25 [0-5] | (2 [0-4] | 1 0,1 [0-9])  0,1 [0-9]))

Vaihtoehtoisesti voit tarkistaa uudemman IPv6-syntaksin osoitteen tällä edistyneemmällä regex-katkelmalla. Ero on vähäinen, vaikkakin elintärkeä kehityksen aikana. (Lähde)

6. Tuhansia erottimia

/ \ D 1,3 (? = (\ D 3) + (?! \ D)) / g

Perinteiset numerointijärjestelmät edellyttävät pilkua, jaksoa tai muuta merkkiä joka kolmas numero suuremmalla numerolla. Tämä regex-koodi toimii missä tahansa numerossa ja käyttää kaikkia valitsemiasi merkkejä jokaiseen kolmanteen numeroon, joka erottaa tuhansista, miljoonista jne. (Lähde)

7. Liitä HTTP hyperlinkkiin

jos (! s.match (/ ^ [a-zA-Z] +: /)) s = 'http: //' + s; 

Olipa kyseessä JavaScript, Ruby tai PHP, tämä säännöllinen lauseke voi osoittautua erittäin hyödylliseksi. Se tarkistaa minkä tahansa URL-merkkijonon tarkistaakseen, onko siinä HTTP / HTTPS-etuliite, ja jos ei, valitse se sen mukaisesti. (Lähde)

8. Vedä verkkotunnus URL-osoitteesta

/https?:\/\/(?:[-\w]+\.)?([-\w]+)\.\w+(?:\.\w+)?\/?.*/i

Jokainen verkkosivuston verkkotunnus sisältää alkuperäisen protokollan (HTTP tai HTTPS) ja usein aliverkkotunnuksen sekä lisäsivun polun. Tämän katkelman avulla voit leikata kaiken tämän ja palauttaa vain verkkotunnuksen ilman ylimääräisiä herkkuja. (SourceL

9. Lajittele avainsanat sanaluettelon mukaan

^ [^ s] * $ vastaa täsmälleen 1-sanan avainsanaa ^ [^ s] * s [^ s] * $ vastaa täsmälleen 2-sanan avainsanaa ^ [^] * s [^ s] * vastaa vähintään kahden sanan avainsanoja (2 ja enemmän) ^ ([^ s] *) 2 [^ s] * $ vastaa täsmälleen 3-sanan avainsanaa ^ ([^ s] * ) 4 [^ s] * $ vastaa 5-sanoja ja muita avainsanoja (longtail)

Google Analyticsin ja Verkkovastaavan työkalujen käyttäjät nauttivat tästä säännöllisestä lausekkeesta. Se voi lajitella ja järjestää avainsanoja hakuun käytettyjen sanojen määrän perusteella.

Tämä voi olla numeerisesti spesifinen (eli vain 5 sanaa) tai se voi vastata sanojen valikoimaa (ts. 2 tai useampia sanoja). Analysointitietojen lajittelussa käytetään yhtä voimakasta ilmaisua. (Lähde)

10. Etsi voimassa oleva Base64-merkkijono PHP: ssä

php [eval] (base64_decode ('(([A-Za-z0-9 + /] 4) * ([A-Za-z0-9 + /] 3 = | [A-Za-z0-9 + /] 2 ==)?) 1 \ '\) \) \;

Jos olet PHP dev sitten jossain vaiheessa saatat joutua jäsentämään koodia, joka etsii Base64-koodattuja binääriobjekteja. Tätä fragmenttia voidaan soveltaa kaikkiin PHP-koodeihin ja tarkistaa, onko olemassa olemassa olevia Base64-merkkijonoja. (Lähde)

11. Voimassa oleva puhelinnumero

^ + d 1,3 a [-.] a (a (p: d 2,3))? [-.] d d [[. \ d \ d \ d \ d $

Lyhyt, makea ja piste. Tämä regex-koodi vahvistaa kaikki perinteiset puhelinnumeron syntaksit, jotka perustuvat ensisijaisesti amerikkalaiseen puhelinnumeroon.

Koska tämä voi muuttua melko monimutkaiseksi aihealueeksi, suosittelen, että tämä Stack-säiettä leikataan yksityiskohtaisempia vastauksia varten. (Lähde)

12. Leading & Trailing Whitespace

^ [s] + | [s] + $

Käytä tätä koodinpätkää vetääksesi johtava / takana oleva välilyönti merkkijonosta. Tämä ei ehkä ole iso juttu, mutta joskus se voi vaikuttaa ulostuloon, kun se vedetään tietokannasta tai sitä sovelletaan toiseen asiakirjan koodaukseen. (Lähde)

13. Vedä kuvalähde)

\< *[img][^\>] * [src] * = * ["" 0,1 ([^] "] *)

Jos jostain syystä sinun täytyy vetää kuvan lähde suoraan HTML-koodista, tämä koodinpätkä on täydellinen ratkaisu. Vaikka se pystyy toimimaan sujuvasti taustalla, Frontend JS devs -palvelun tulisi tukeutua jQueryn .attr () -menetelmään frontendissä. (Lähde)

14. Päivitä päivämäärä DD / MM / YYYY-muodossa

^ (? :( ?: 31 (\ / | - | \.) (?: 0? [13578] | 1 [02])) \ 1 | (? :( ?: 29 | 30) (\ / | - | \.) (?: 0? [1,3-9] | 1 [0-2]) \ 2)) (? :( ?: 1 [6-9] | [2-9] \ d)? \ d 2) $ | ^ (?: 29 (\ / | - | \.) 0? 2 \ 3 (? :(? :( ?: 1 [6-9] | [2-9] \ d )? (?: 0 [48] | [2468] [048] | [13579] [26]) | (? :( ?: 16 | [2468] [048] | [3579] [26]) 00)) )) $ | ^ (?: 0? [1-9] | 1 \ d | 2 [0-8]) (\ / | - | \.) (? :( ?: 0? [1-9]) | (?: 1 [0-2])) \ 4 (? :( ?: 1 [6-9] | [2-9] \ d)? \ d 2) $

Päivämäärät ovat hankalia, koska ne voivat näkyä tekstinä + numeroina tai vain eri muodoissa olevina numeroina. PHP: llä on fantastinen päivämäärätoiminto, mutta tämä ei aina ole paras valinta, kun vedät raakaa merkkijonoa. Harkitse sen sijaan tätä säännöllistä lauseketta, joka on tehty kyseiselle päivämäärän syntaksille. (Lähde)

15. YouTube-videotunnuksen ottelu

/http:\/\/(?:youtu\.be\/|(?:[az]2,3\.)?youtube\.com\/watch(?:\?|#\!)v =) ([\ w -] 11). * / gi

YouTube on säilyttänyt saman URL-rakenteen vuosia, koska se toimii vain. Se on myös suosituin videonjako-sivusto verkossa, joten YouTube-videot ajavat yleensä eniten liikennettä.

Jos sinun täytyy vetää YouTube-videotunnus URL-osoitteesta, tämä regex-koodi on täydellinen ja sen pitäisi toimia täydellisesti kaikissa YouTube-URL-rakenteiden muunnelmissa. (Lähde)

16. Voimassa oleva ISBN

b (?: ISBN (? ::? |))? ((?: 97 [89])?  [dx]) \ t

Painetut kirjat noudattavat ISBN-numeroa. Tämä voi olla melko hankala, kun harkitset eroja ISBN-10: n ja ISBN-13: n välillä.

Tämän uskomattoman katkelman avulla voit kuitenkin vahvistaa ISBN-numeron ja tarkistaa, onko se ISBN10 tai 13. Kaikki koodi on kirjoitettu PHP: ssä, joten tämän pitäisi osoittautua poikkeuksellisen hyödylliseksi web-kehittäjille. (Lähde)

17. Tarkista Postinumero

^ \ D 5 (?: [- \ s] \ d 4)? $

Tämän katkelman luoja ei pelkästään julkaissut töitään ilmaiseksi, vaan hän otti myös aikaa selittääkseen sen. Löydät tämän katkelman hyödylliseksi, jos sovitat tyypillisen 5-numeroisen postinumeron tai pidemmän 9-numeroisen version.

Muista, että tämä on tarkoitettu ensisijaisesti amerikkalaiselle postinumerojärjestelmälle, joten tämä saattaa vaatia muutoksia muissa maissa. (Lähde)

18. Voimassa oleva Twitter-käyttäjätunnus

/ @ ([A-Za-z0-9 _] 1,15) /

Tässä on hyvin pieni koodinpätkä, joka vastaa merkkijonossa olevia Twitter-käyttäjätunnuksia. Se tarkistaa @mainita syntaksi, joka sopii täydellisesti piippauksen (tai tweetin) sisällön automaattiseen skannaamiseen. (Lähde)

19. Luottokorttinumerot

^ (?: 4 [0-9] 12 (?: [0-9] 3)? | 5 [1-5] [0-9] 14 | 6 (?: 011 | 5 [ 0-9] [0-9]) [0-9] 12 | 3 [47] [0-9] 13 | 3 (?: 0 [0-5] | [68] [0-9 ]) [0-9] 11 | (?: 2131 | 1800 | 35 \ d 3) \ d 11) $

Luottokortin numeron validointi vaatii usein turvallisen alustan, joka on muualla verkossa. Regexiä voidaan kuitenkin käyttää tyypillisen luottokortin numeron vähimmäisvaatimuksiin.

Kattavampi luettelo yksittäisten korttien koodeista löytyy täältä. Tähän kuuluvat Visa, MasterCard, Discover ja monet muut. (Lähde)

20. Etsi CSS-määritteet

^ \ S * [a-zA-Z \ -] + \ s * [:] 1 \ s [a-zA-Z0-9 \ s. #] + [;] 1

Voi olla harvinaista, että suoritat regexin yli CSS: n, mutta se ei ole myöskään uskomattoman outo tilanne.

Tämän koodinpätkän avulla voidaan vetää kaikki vastaavat CSS-ominaisuudet ja -arvot yksittäisistä valinnoista. Sitä voidaan käyttää mistä tahansa syystä, mahdollisesti CSS-palojen katseluun tai päällekkäisten ominaisuuksien poistamiseen. (Lähde)

21. HTML-kommentit

Jos jostain syystä sinun täytyy poistaa kaikki kommentit HTML-lohkosta, tämä on käytettävä regex-koodi. Ilmaisun ohella löytyy PHP-esimerkki käyttäen preg_replace-ohjelmaa. (Lähde)

22. Facebook-profiilin URL-osoite

/(?:http:\/\/)?(?:www\.)?facebook\.com\/(?:(?:\w)*#!\/)?(?:pages\/)? (?: [\ w \ -] * \ /) * ([\ w \ -] *) /

Facebook on uskomattoman suosittu ja on käynyt läpi monia eri URL-osoitteita. Tilanteessa, jossa käyttäjä käyttää profiilin URL-osoitteita, saattaa olla hyödyllistä jäsentää merkkijonoja ja vahvistaa, että ne on jäsennelty oikein. Tämä katkelma voi tehdä juuri niin ja se sopii erinomaisesti kaikkiin FB-tyylisiin linkkeihin. (Lähde)

23. Tarkista Internet Explorerin versio

^. * MSIE [5-8] (?: [0-9] +)? (?!. * Trident / [5-9] 0). * $

Microsoftin siirtyminen Edgeen ei ole ollut yksimielinen, ja monet ihmiset luottavat edelleen perinteiseen Internet Exploreriin. Kehittäjien on usein tarkistettava IE: n versiot käsittelemään epäjohdonmukaisuuksia renderimoottoreiden kanssa.

Tätä katkelman avulla voidaan testata selainagenttia, joka perustuu Internet Explorerin (5-11) versioon. (Lähde)

24. Uutishinta

/(\$[0-9,]+(\.[0-9]2)?)/

Hinnoittelu on eri muodoissa, jotka sisältävät desimaaleja, pilkkuja ja valuuttasymboleja. Tämä säännöllinen lauseke voi tarkistaa kaikki nämä eri muodot vetämällä hinnan mistä tahansa merkkijonosta. (Lähde)

25. Parse E-mail Header

/\b[A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[A-Z]2,6\b/i

Tämän yksittäisen koodirivin avulla voit jäsentää sähköpostin otsikon läpi vetääksesi sen “että” tiedot otsikosta. Sitä voidaan käyttää yhdessä useiden sähköpostiviestien kanssa, jotka on yhdistetty yhteen.

Jos haluat välttää tämän tehtävän regexin, voit ehkä luottaa jäsentelykirjastoon. (Lähde)

26. Yhdistä erityinen tiedostotyyppi

/^(.*\.(?!(htm|html|class|js)$))?[^.]*$/i

Kun käsittelet erilaisia ​​tiedostomuotoja, kuten .xml, .html ja .js, se voi auttaa tarkistamaan tiedostoja sekä paikallisesti että käyttäjien lataamana. Tämä katkaisu vetää tiedostopääte tarkistamaan, onko se kelvollinen useista voimassa olevista laajennuksista, joita voidaan muuttaa tarpeen mukaan. (Lähde)

27. Yhdistä URL-merkkijono

/[-a-zA-Z0-9@:%_\+.~#?&//=]2,256\.[az]2,4\b(\/[-a-zA-Z0 -9 @:% _ \ +. ~ #? & // =] *)? / gi

Tätä katkelmaa voidaan käyttää sekä HTTPS- että HTTP-merkkijonoihin, jotta voit tarkistaa, vastaako teksti perinteisen TLD-verkkotunnuksen syntaksin. Tämän regexin käyttöönotto on myös yksinkertaista JavaScriptin RegExp: n avulla. (Lähde)

28. Liitä rel =”nofollow” linkkeihin

(] *) (href = "https?: //) ((?! (?: (?: www:)? '. implode (' | (?: www:)? ', $ follow_list).') ) [^ "] +)" ((?!. * \ Brel =) [^>] *) (?: [^>] *)>

Jos työskentelet HTML-koodin erän kanssa, voi olla hirvittävää soveltaa manuaalista työtä toistuviin tehtäviin. Säännölliset ilmaisut ovat täydellisiä tähän tilaisuuteen, ja ne säästävät paljon aikaa.

Tämä katkelma voi vetää kaikki ankkurilinkit HTML-lohkosta ja liittää sen rel =”nofollow” määritä jokaiselle elementille. Kehittäjä, joka kirjoitti tämän koodin, oli ystävällisesti julkaissut raakaa ilmaisua sekä toimivaa esimerkkiä PHP: ssä.

29. Media Query Match

/ @ Media ([^ ] +) \ ([\ s \ S] +?) \ S * / g

Hajota CSS-median kyselyt niiden parametreihin ja ominaisuuksiin. Tämä voi auttaa analysoimaan ulkoista CSS: ää puhtaammassa muodossa ja keskittymään suoraan koodin toimintaan. (Lähde)

30. Google-haun syntaksi

/( [+- ]?(?:'.+?'|".+?"| [^+]] 1 [^] *)) / g

Voit rakentaa oman regex-koodin, jolla voit käsitellä hakutekstiä Googlen tavaramerkkisynaksin avulla. Plus-merkki (+) tarkoittaa muita avainsanoja ja miinusmerkki (-) tarkoittaa sanoja, jotka on jätettävä huomiotta ja poistettava tuloksista.

Se on melko monimutkainen katkaisu, mutta sitä käytetään oikein, sillä se voi luoda perustan omalle hakualgoritmille. (Lähde)

Paketoida

Reittien hallitseminen on pitkä, mutta palkitsevaa, jos pysyt sen mukana. Tyypillisten regex-työkalujen ohella paras tapa tutkia on toistaminen. Yritä rakentaa web-sovelluksia, jotka tukeutuvat näihin regex-katkelmiin ja oppivat, miten ne toimivat todellisessa toimivassa web-sovelluksessa. Ja jos sinulla on muita katkelmia, joiden avulla voit lähettää ne kommenttien alueelle alla.

Lue nyt:

50 Hyödyllisiä CSS-katkelmia Jokaisen suunnittelijan pitäisi olla