정규 표현식을 쓰고 싶지 않을 때.⛞

12335 단어 practicesbestjavascriptregex
정규 표현식은 당연히 매우 유용한 강력한 도구이지만, 복잡하고 혼란스러워지기 쉽다.
큰 프로젝트에서, 당신은 어떤 상황에서도 대체 방안이 없기 때문에 정규 표현식을 피할 수 없다.
그러나 어떤 경우, 이런 상황이 자주 발생한다. 그래, 나는 정규 표현식을 사용해야 한다고 생각할 수도 있다.
하지만 몇 가지 선택이 있다. 당신이 더 사용하고 싶을 수도 있다.

예제 - URL 구문 분석 마지막 부분
예를 들어, 다음과 같은 링크가 있습니다.
const link = 'http://www.google.com/m8/feeds/contacts/myemail%40gmail.com/base/nabb80191e23b7d9';
현재 마지막 부분 (id) - nabb80191e23b7d9 을 원하십니까?
regex를 사용하는 경우 다음을 수행합니다.
const result = link.match(/\/([^\/]+)\/?$/)[1];
이 정도면 됐어.문제는 코드를 이해하는 데 전념해야 한다는 것이다. 우리는 다른 방법으로 검색을 간소화할 수 있다.
const result = link.substr(link.lastIndexOf('/') + 1);
// OR
const result = link.substr(-16);
// OR
const result = link.split('/').pop(-1);
그래서 우리는 같은 결과를 얻을 것이다.
만약 우리가 꺾임표가 있다면, 마지막 방법의 원리는 같다here-is-my-id-nabb80191e23b7d9 here{SPLIT}is{SPLIT}my{SPLIT}id{SPLIT}nabb80191e23b7d9잠깐만요.
여기서 언급해야 할 점은 대부분의 경우 정규 표현식의 속도가 비교적 느리다는 것이다.항상 그렇지는 않지만, 주로는.물론 한 항목에서 성능이 가장 중요한 것은 아니다. 특히 클라이언트, 예를 들어 체소는 눈에 띄지 않고 중요하지 않을 수도 있다. 그러나 정규 표현식 예시가 없는 더 큰 장점은 우리가 더 많은 코드를 읽을 수 있고 더 많은 가장자리 상황을 포괄하고 싶다는 것이다.

HTML에서 검색하기
이제 HTML 문서의 모든 링크 텍스트를 문자열로 해석합니다. 예를 들어,
const rawHtml = "<html><head><title>titleTest</title></head><body><a href='https://www.test1.com' mydata="13">test01</a><a href='https://www.test2.com'>test02</a><a href='https://www.test3.com'>test03</a></body></html>";
모든 텍스트를 정규 표현식으로 가져오려면 다음과 같은 결과를 얻을 수 있습니다.
const regex =  /<a[^>]*>([^<]+)<\/a>/ig;
const result = rawHtml.match(regex).map(function(val){
return val.replace(/<\/?a[^>]*>/g,'');
});
그러나 만약 내가 링크 탭에 굵은 텍스트 같은 탭을 추가한다면 무슨 일이 일어날까요....<a href='https://www.test1.com' mydata="13">test01 with some <b>bold text</b> inside</a>....그리고 나서 나의 예는 더 이상 효과가 없다. 나는 그것을 조정해야 한다.
또 다른 방법은 DOMParser를 직접 사용하는 것입니다.
const doc = new DOMParser().parseFromString(rawHTML, "text/html");
const matches = [...doc.querySelectorAll('a')];
const result = matches.map(el => el.innerText);
그래서 우리는 같은 결과를 얻을 것이다. 가장 중요한 것은 명확한 코드가 있고 함수성을 확장할 수 있다는 것이다.예를 들어 데이터 속성이 mydata="13"인 링크의 텍스트만 가져오려면querySelector를 조정해야 합니다.
const matches = [...doc.querySelectorAll('a[mydata="13"]')];
우리는 링크뿐만 아니라 모든 요소를 해석할 수 있다.일단 우리가 유효한 HTML이 생기면 그것은 정상적으로 작동할 것이다.

URL 확인:
그런 다음 정규 표현식에서 스택 오버플로우에서 복제하는 URL을 확인합니다.
function validateUrl(string){
  return /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/.test(string);
}
http://google.com나https://something.yahoo.de 같은 일반적인 URL은 정상적으로 작동할 수 있고,
그러나 최근에는 키릴 문자(또는 기타) 문자를 도메인에 사용할 수 있으므로 다음 이름의 도메인을 사용합니다.
http://jjаааааа.бг
잘못된 URL로 식별됩니다.
또한 http://192.168.0.102가 있는 IP 도메인 - 정규 표현식은 유효한 URL로 식별하지만 잘못된 IP 주소(예: http://392.168.0.102는 유효한 주소로 식별됩니다.
비정규 표현식의 해결 방안은 URL 대상을 사용하는 것이다
이 작업을 수행하는 방법:
function validateUrl(string) {
    try {
        const url = new URL(string);
        if (url.origin !== 'null') return true;
    } catch (e) {
        return false;
    }
    return false;
}
이것은 언급된 모든 가장자리 상황을 검증할 뿐만 아니라 더욱 깨끗하고 이해하기 쉬운 해결 방안이기도 하다.
그 밖에 그것은 쉽게 확장된다.예를 들어, 특정 질의 매개변수만 해석하거나 질의 매개변수를 설정하려는 경우 다음을 수행할 수 있습니다.
myUrl=newURL('('https://google.com?test=1#someId');
내 웹 주소.매개변수를 검색합니다.획득("테스트");
내 웹 주소.매개변수를 검색합니다.집합('test2', 154);
우리는 또한 쉽게 해시와 my Url을 함께 사용할 수 있다.망치다

이메일 주소 확인
당신은 정규 표현식이 없으면 우리가 어떻게 전자 우편 주소를 검증할 수 있다고 생각합니까?
응, 지금 나는 어떤 더 좋은 해결 방안이 있는지 모르겠어. 그래서 나는 여전히 정규 표현식을 사용할 거야.
하지만 생각해 보십시오. 우리는 정말 가능한 전자메일을 검증할 필요가 없습니다.만약 우리가 전자 우편으로 등록된 시스템이 있다면, 우리는 사용자가 기존 전자 우편 주소에서 검증 링크를 받기를 희망한다
이것이 바로 우리가 전자 우편 검증의 모든 가능한 가장자리 상황을 덮어쓰는 데 많은 시간과 정력을 들일 필요가 없는 이유이다. 우리가 간단한 정규 표현식 검증만 있으면 충분하다. 예를 들어 UI에서 사용자가 입력한 오류나 영역을 잊어버리거나 비슷한 상황을 방지하기 위해서다.
이런 노력의 한 예는 이 기준https://emailregex.com/이다.
그것은 대부분의 경우 잘 사용되지만, 나는 시릴 자모의 전자메일에서 시도해 보았지만, 효과적인 전자메일을 식별할 수 없었다.그래서 그것도 최고가 아니야.
그래서 레지스터는 멋있고 레지스터는 좋으며 기능이 강하지만 매칭과 교체에 있어서 반드시 좋은 것은 아니다.
c 언어 최대 공약수
JVM 쓰레기 수집 기와 메모리 할당 사 이 드 정책

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage