30 Полезни фрагменти от кода на Regex за уеб разработчици

Редовните изрази са мощен инструмент, който трябва да бъде във всеки инструмент на всеки разработчик. Те могат да се сравняват с низ от символи, базирани на много сложни параметри, което може да ви спести много време при изграждането на динамични уебсайтове.

Уеб разработчиците се сблъскват с различни задачи, отколкото разработчиците на софтуер, но много от същите основи на кода остават. Редовни изрази (или регулярен) имат a стръмна първоначална крива на учене, но те могат да бъдат изключително мощно, когато се използва правилно.

Най-трудната част е изучаването на синтаксиса и изучаването на това как да напишете собствения си код от нулата. За да спестите време, организирах 30 различни откъса на код, който можете да включите в проекти за развитие. И тъй като regex не е ограничен само до един език, можете да приложите тези фрагменти към нищо от JavaScript да се PHP или Питон.

1. Сила на паролата

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

Проверката на силата на паролата често е субективна, така че няма абсолютен верен отговор. Но аз чувствам, че този реджекс фрагмент е чудесна отправна точка, ако не искате да напишете своя собствена проверка на силата на паролата от нулата. (Източник)

2. Шестнадесетичен цвят

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

Областта на уеб разработката е повсеместна с шестнадесетични цветови кодове. Този фрагмент може да се използва за изтегляне на шестнадесетичен код от всеки низ за всякакви цели. (Източник)

3. Потвърдете имейл адреса

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

Една от най-често срещаните задачи за разработчик е да провери дали даден низ е форматиран в стила на имейл адрес. Има много различни варианти за изпълнение на тази задача, така че тази връзка в SitePoint предлага два отделни кодови фрагмента за проверка на синтаксиса на електронната поща срещу низ. (Източник)

4. IPv4 адрес

/\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]) \ б /

Подобно на имейл адрес е типичният IP адрес, използван за идентифициране на конкретен компютър, който има достъп до интернет. Този редовен израз ще провери низ, за ​​да види дали следва синтаксиса на IPv4 адреса. (Източник)

5. IPv6 адрес

(([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 -9а-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]))

Като алтернатива може да искате да проверите адрес за по-новия IPv6 синтаксис с този по-разширен реджекс фрагмент. Разликата е малка, макар и жизнена по време на развитието. (Източник)

6. Хиляди сепаратор

/ \ Г 1,3 (? = (\ Г 3) + (! \ Г)) / г

Традиционните системи за номериране изискват запетая, период или някаква друга маркировка на всяка трета цифра в по-голям брой. Този код се използва за произволен номер и ще приложи всяка марка, която сте избрали за всяка трета цифра, която се разделя на хиляди, милиони и т.н. (Източник)

7. Прехвърлете HTTP към хипервръзка

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

Независимо дали работите в JavaScript, Ruby или PHP, този редовен израз може да се окаже много полезен. Той ще провери всеки URL адрес, за да види дали има префикс HTTP / HTTPS, и ако не, го подгответе съответно. (Източник)

8. Издърпайте домейн от URL

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

Всеки домейн на уебсайта съдържа първоначалния протокол (HTTP или HTTPS) и често поддомейн плюс допълнителния път на страницата. Можете да използвате този фрагмент, за да прережете всичко това и да върнете само името на домейна без допълнителни излишни украшения. (SourceL

9. Сортирайте ключовите думи по брой думи

^ [^ s] * $ съвпада точно с ключова дума от една дума ^ [^ s] * s [^ s] * $ съвпада точно с ключова дума от 2 думи ^ [^ s] * \ t * съответства на ключови думи с най-малко 2 думи (2 и повече) ^ ([^ s] * s) 2 [^ s] * $ съвпада точно с ключова дума от 3 думи ^ ([^ s] * \ t ) 4 [^] * $ съответства на 5 думи и повече ключови думи (longtail)

Потребителите на Google Анализ и Инструменти за уеб администратори наистина ще се радват на този редовен израз. Той може да сортира и организира ключови думи въз основа на броя думи, използвани в търсенето.

Това може да е числово специфично (т.е. само 5 думи) или може да съвпада с редица думи (т.е. 2 или повече думи). Когато се използва за сортиране на аналитични данни, това е един мощен израз. (Източник)

10. Намерете валиден низ Base64 в PHP

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

Ако сте PHP разработчик, то в някакъв момент може да се наложи да анализирате кода, търсейки кодирани от Base64 двоични обекти. Този фрагмент може да бъде приложен към целия PHP код и ще проверява за съществуващи низове на Base64. (Източник)

11. Валиден телефонен номер

d 1,3? [-.]? (? (?: d 2,3)?? [-.]? \ г \ г \ г \ г $

Кратко, сладко и до точката. Този код ще потвърди всеки традиционен синтаксис на телефонен номер, основан основно на американския стил на телефонни номера.

Тъй като това може да се превърне в доста сложен предмет, препоръчвам да се намали тази нишка Stack за по-подробни отговори. (Източник)

12. Водещо и следващо празно пространство

^ [s] + | [s] + $

Използвайте този кодов фрагмент, за да извадите празно пространство за водене / приключване от низ. Това може да не е голяма работа, но понякога може да повлияе на изхода, когато е изтеглен от база данни или е приложен към друго кодиране на документ. (Източник)

13. Издърпайте източника на изображението)

\< *[img][^\>] * [src] * = * [\ t

Ако по някаква причина трябва да извадите източник на изображение направо от HTML, този кодов фрагмент е идеалното решение. Въпреки че може да работи гладко в бекенда, JS devs интерфейсите трябва да разчитат на метода .attr () на jQuery за интерфейса. (Източник)

14. Проверка на дата в формат DD / MM / YYYY

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

Датите са трудни, защото могат да се появяват като текст + числа или просто като числа с различни формати. PHP има фантастична функция за дата, но това не винаги е най-добрият избор, когато дърпате суров низ. Вместо това използвайте този редовен израз, направен за този специфичен синтаксис за датата. (Източник)

15. Съвпадение на видеоклип в YouTube

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

YouTube е запазила същата структура на URL адресите в продължение на години, защото просто работи. Това е и най-популярният сайт за споделяне на видео в мрежата, така че видеоклиповете на YouTube обикновено карат най-много трафик.

Ако трябва да извадите идентификационния номер на видеоклип от YouTube от този URL код, той е идеален и трябва да работи перфектно за всички варианти на структурите на URL адрес в YouTube. (Източник)

16. Валиден ISBN

b (?: ISBN (? ::? |))? ((?: 97 [89]) d (9) [dx]) b / i

Отпечатаните книги следват система от номерация, известна като ISBN. Това може да се окаже доста сложно, когато вземете предвид разликите между ISBN-10 и ISBN-13.

Въпреки това този невероятен фрагмент ви позволява да потвърдите ISBN номер и да проверите дали е ISBN10 или 13. Всички кодове са написани на PHP, така че това трябва да се окаже изключително полезно за уеб разработчиците. (Източник)

17. Проверка на пощенския код

^ \ Г 5 (: [- \ и] \ г 4)? $

Създателят на този фрагмент не само освободи работата си безплатно, но и отдели време да го обясни. Ще откриете, че този фрагмент е полезен, независимо дали съчетавате типичен 5-цифрен пощенски код или по-дългата 9-цифрена версия.

Имайте предвид, че това е предназначено главно за американската система за пощенски кодове, така че това може да изисква корекции за други страни. (Източник)

18. Валидно потребителско име в Twitter

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

Ето един много малък кодов фрагмент за съвпадение с потребителските имена в Twitter, намерени в низ. Той проверява за @споменавам синтаксис, който е идеален за автоматично сканиране на съдържанието на чуруликане (или туитове). (Източник)

19. Номера на кредитни карти

^ (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 \ г 3) \ г 11) $

Валидирането на номер на кредитна карта често изисква защитена платформа, хоствана на друго място онлайн. Но regex може да се използва за минималните изисквания за типичен номер на кредитна карта.

По-подробен списък с кодове за отделни карти можете да намерите тук. Това включва Visa, MasterCard, Discover и много други. (Източник)

20. Намерете атрибутите на CSS

^ \ Е * [а-ZA-Z \ -] + \ S * [:] 1 \ и [. А-ZA-Z0-9 \ S #] + [] 1

Може да е рядкост да стартирате regex над CSS, но това не е невероятно странна ситуация.

Този кодов фрагмент може да се използва за изваждане на всяко съвпадащо CSS свойство и стойност от отделни селектори. Може да се използва по всякакви причини, евентуално за преглед на парчета от CSS или за премахване на дублиращи се свойства. (Източник)

21. Strip HTML Comments

Ако по някаква причина трябва да премахнете всички коментари от блок HTML, това е кодът на regex за използване. Наред с израза ще намерите и пример от PHP, използвайки preg_replace. (Източник)

22. URL адрес на профила във Facebook

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

Facebook е изключително популярен и е преминал през много различни URL схеми. В ситуация, в която приемате URL адреси на потребителски профили, може да е полезно да се анализират низовете и да се потвърди, че те са правилно структурирани. Този фрагмент може да направи точно това и е идеален за всички връзки в стила на FB. (Източник)

23. Проверете версията на Internet Explorer

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

Преместването на Microsoft в Edge не е единодушно и много хора все още разчитат на класическия Internet Explorer. Разработчиците често трябва да проверяват за версии на IE, за да се справят с несъответствията с движещите се изображения.

Този фрагмент може да се използва в JavaScript за тестване на браузър агент, въз основа на коя версия на Internet Explorer (5-11) се използва. (Източник)

24. Извличане на цена

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

Ценообразуването се предлага в различни формати, които съдържат знаци след десетичната запетая, запетаи и валутни символи. Този редовен израз може да провери всички тези различни формати, за да извади цена от всеки низ. (Източник)

25. Разбор на заглавката на електронна поща

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

С този единствен код можете да анализирате чрез имейл заглавието, за да го извадите “да се” информация от заглавната част. Може да се използва в тандем заедно с множество имейли.

Ако предпочитате да избягвате regex за тази задача, можете да разчитате на разборна библиотека. (Източник)

26. Съвпадение на конкретен тип

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

Когато се занимавате с различни файлови формати като .xml, .html и .js, може да помогнете за проверка на файлове както локално, така и от потребители. Този фрагмент извлича файлово разширение, за да провери дали е валидно от серия от валидни разширения, които могат да се променят, ако е необходимо. (Източник)

27. Съвпадение с URL низ

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

Този фрагмент може да се използва както за низове HTTPS, така и за HTTP, за да се провери дали текстът съответства на традиционния синтаксис на домейна TLD. Има също и проста реализация на този regex, използвайки RegExp на JavaScript. (Източник)

28. Добавете rel =”Nofollow” към Връзки

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

Ако работите с пакет от HTML код, той може да бъде ужасно да се прилага ръчен труд в повтарящи се задачи. Редовни изрази са идеални за този случай и те ще спестят много време.

Този фрагмент може да издърпа всички котви връзки от блок HTML и да добави отн =”Nofollow” атрибут за всеки елемент. Разработчикът, който е написал този код, е достатъчно любезен да публикува суровия израз плюс работен пример в PHP.

29. Съвпадение на медийни заявки

/ @ Среда ([^ ] +) \ ([\ S \ S] +?) \ S * / г

Разделете CSS медийните заявки на техните параметри и свойства. Това може да ви помогне да анализирате външния CSS по по-чист начин с по-директен фокус върху начина на работа на кода. (Източник)

30. Синтаксис на Google Търсене

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

Можете да създадете собствен код за регулярни изчисления, за да манипулирате текст, който може да се търси, като използвате синтаксиса на търговската марка на Google. Знакът плюс (+) означава допълнителни ключови думи, а знакът минус (-) означава думи, които трябва да бъдат игнорирани и премахнати от резултатите.

Това е доста сложен фрагмент, но се използва правилно и може да осигури база за изграждане на собствен алгоритъм за търсене. (Източник)

Увийте-Up

Пътят към овладяването на regex е дълъг, но възнаграждаващ, ако се придържате към него. Отвъд типичните regex инструменти най-добрият начин за изучаване е чрез повторение. Опитайте да създадете уеб приложения, които разчитат на тези реджекс фрагменти, за да научите как работят в реално функциониращо уеб приложение. И ако имате други фрагменти, които да ви предложат, можете да ги публикувате в полето за коментари по-долу.

Сега прочетете:

50 полезни CSS фрагмента, които всеки дизайнер трябва да има