Chrome 또는 IE를 사용하여 웹 페이지에서 'foo | bar'와 같은 정규식을 검색하려면 어떻게해야합니까? "Regular Expression Searcher"확장명을 알고 있지만 작동하지 않습니다. (슬래쉬를 칠 때 아무 일도 일어나지 않습니다.) 웹 스토어의 리뷰에 따르면 이는 많은 사용자에게 일반적인 문제입니다.
Chrome 또는 IE를 사용하여 웹 페이지에서 'foo | bar'와 같은 정규식을 검색하려면 어떻게해야합니까? "Regular Expression Searcher"확장명을 알고 있지만 작동하지 않습니다. (슬래쉬를 칠 때 아무 일도 일어나지 않습니다.) 웹 스토어의 리뷰에 따르면 이는 많은 사용자에게 일반적인 문제입니다.
답변:
크롬 콘솔에서 시도해 볼 수도 있습니다.
var p=/.*(regu).+?\ /gi; console.log( document.body.innerText.match(p) );
콘솔을 열고 콘솔 에 복사하여 붙여 넣기 만하면 됩니다enter . 이 페이지에서 테스트 할 수 있습니다.
맞으면 개선 될 수 있습니다.
여기서는 콘솔 일치 색인과 일치하는 텍스트로 인쇄합니다. 여기서 우리는 regu
20 문자 앞에 (또는 줄이 시작하면 더 적음) 10 문자 뒤에 (또는 eol이면 더 적음) 을 포함하는 텍스트를 일치 시킵니다.
var p=/.{0,20}regu[^ \n]+[^\n]{0,10}/gi;
while (m = p.exec(document.body.innerText)) {
console.log( 'Index: '+m.index+' Match: '+m ); }
또한 이것을 시도해보십시오 . 빨간색 페이지에 모든 일치하는 배경 을 칠할 것입니다 . rexexp는 완벽하지는 않지만 적어도 HTML 태그를 엉망으로 해서는 안됩니다.
var p=/(\>{1}[^\n\<]*?)([^\n\<]{0,30}regu[^\n\<]{0,10})/gi,b=document.body;
b.innerHTML=b.innerHTML.replace(p,'$1<span style="background-color:red;">$2</span>');
이것을 사용하는 또 다른 방법은 javascript:
프로토콜 을 사용하는 것입니다 (위와 동일한 코드).
javascript:(function(){var p=/(\>{1}[^\n\<]*?)([^\n\<]{0,30}regu[^\n\<]{0,10})/gi,b=document.body;b.innerHTML=b.innerHTML.replace(p,'$1<span style="background-color:red;">$2</span>');})();
예를 들어 javascript:
프로토콜 1을 사용 하면 정규 표현식을 검색하기 위해 모든 웹 페이지에 작은 검색 상자를 삽입 할 수 있습니다.
간단한 정규 표현식을 사용하여 페이지에서 빨간색 일치 항목 을 제거 할 수도 있음을 이미 알고 있다고 생각합니다 .
몇 시간 동안 이것을 계속 개발하면 북마크에 맞는 검색 플러그인이있을 수 있습니다 :)
innerText
. innerText
지원 여부를 확인 하고 사용할 수없는 textContent
경우 기본값으로 설정하는 것이 좋습니다 innerText
.
[...document.body.innerText.matchAll(p)]
73+ 버전의 Chrome 코드와 함께 사용할 수 있습니다 .
Chrome에서 정규 표현식 검색
정규식을 사용하여 웹 페이지를 검색 할 수있는 간단한 검색 유틸리티입니다.
개발중인 기능
- 찾은 결과를 토글
- 개선 된 UI
- 대소 문자 구분 간 전환
- 확장 기능을 전환하기위한 바로 가기 만들기
- 검색 버튼을 클릭하는 대신 검색시 "Enter"키를 누르십시오
중요 참고 사항
이것은 페이지 액션 확장 프로그램이므로 이미 연 페이지에서 바로 작동하지 않습니다. 이 확장을 사용하기 전에 브라우저를 다시 시작하는 것이 좋습니다. 열린 페이지를 새로 고칠 수도 있습니다.
Find + 확장 프로그램은 좋은 리뷰를 가지고 있지만 아직 언급되지 않았습니다 : https://chrome.google.com/webstore/detail/find%20-regex-find-in-page/fddffkdncgkkdjobemgbpojjeffmmofb?hl=ko-KR
나는 그것을 시험해 보았고 잘 작동하며 명확하고 간단한 UI를 가지고 있습니다.
HTML 요소에서 텍스트를 검색 할 수 있습니다. 내가 시도한 다른 사람들은 그렇게 할 수 없었습니다.
언급 된 다른 확장 프로그램은 저에게 효과적이지 않으므로 https://chrome.google.com/webstore/detail/regex-search/bcdabfmndggphffkchfdcekcokmbnkjl?hl에서 시도 할 수있는 나만의 오픈 소스 크롬 확장 프로그램을 작성했습니다. = en & gl = 미국
소스 코드는 github에서 사용할 수 있습니다 : https://github.com/gsingh93/regex-search
Chrome 개발자 도구 모드에서 ctrl+ shift+를 입력합니다 F(Windows에서는 다른 OS에 대해서는 잘 모르겠습니다).
검색을위한 reg-ex 옵션이 있습니다. 모든 파일을 검색하므로 JavaScript 소스가 포함됩니다. HTML로만 제한 할 수 있는지 확실하지 않습니다.
실제로 검색은 아니지만이 정규 표현식 형광펜 (어딘가에 있음)이 매우 유용하다는 것을 알았으며 모든 브라우저에서 작동합니다.
javascript:(function(){var%20count=0,%20text,%20regexp;text=prompt(%22Search%20regexp:%22,%20%22%22);if(text==null%20||%20text.length==0)return;try{regexp=new%20RegExp(%22(%22%20+%20text%20+%22)%22,%20%22i%22);}catch(er){alert(%22Unable%20to%20create%20regular%20expression%20using%20text%20'%22+text+%22'.\n\n%22+er);return;}function%20searchWithinNode(node,%20re){var%20pos,%20skip,%20spannode,%20middlebit,%20endbit,%20middleclone;skip=0;if(%20node.nodeType==3%20){pos=node.data.search(re);if(pos%3E=0){spannode=document.createElement(%22SPAN%22);spannode.style.backgroundColor=%22yellow%22;middlebit=node.splitText(pos);endbit=middlebit.splitText(RegExp.$1.length);middleclone=middlebit.cloneNode(true);spannode.appendChild(middleclone);middlebit.parentNode.replaceChild(spannode,middlebit);++count;skip=1;}}else%20if(%20node.nodeType==1%20&&%20node.childNodes%20&&%20node.tagName.toUpperCase()!=%22SCRIPT%22%20&&%20node.tagName.toUpperCase!=%22STYLE%22){for%20(var%20child=0;%20child%20%3C%20node.childNodes.length;%20++child){child=child+searchWithinNode(node.childNodes[child],%20re);}}return%20skip;}window.status=%22Searching%20for%20%22+regexp+%22...%22;searchWithinNode(document.body,%20regexp);window.status=%22Found%20%22+count+%22%20match%22+(count==1?%22%22:%22es%22)+%22%20for%20%22+regexp+%22.%22;})();
javascript로 이동하십시오 .void ((function () {b = document.body; b.innerHTML = b.innerHTML.replace (new RegExp ( "(> {1} [^ \ n \ <] *?)) ([^ \ n \ <] {0,30} "+ prompt ("검색 할 정규식을 입력하십시오. ") +"[^ \ n \ <] {0,10}) ","g "), '$ 1' + prompt ( '발생 전에 배치 할 텍스트를 입력하십시오.') + '$ 2'+ prompt ( '발생 후 배치 할 텍스트를 입력하십시오.'))}) ()) `.
javascript:
부분은 Chrome의 URL 표시 줄에 붙여 넣어지지 않습니다.