☰

Chrome에서 대소문자 구분 검색

tag-icon • tag-icon google-chrome
Chrome에서 대소문자 구분 검색

Google Chrome에서 페이지 검색 시 대소문자를 구분하는 방법이 있나요?

브라우저의 스크린샷

"Tree"를 검색하고 있는데 "tree" 또는 "TREE"와 같이 내가 찾고 있는 대소문자와 일치하지 않는 모든 변형을 제외하고 싶다고 가정해 보겠습니다. 이것이 가능한가?

답변1

요약(2022년 2월 기준):

아직 아님, 하지만결국.

2022년 현재 Chrome에는 2018년부터 대소문자를 구분하는 페이지에서 찾기 기능이 존재했지만 Google은 아직 UI에 해당 기능을 노출하지 않았습니다.

타임라인

  • 2011년 4월 6일 현재,기능 요청Chromium(Chrome의 오픈 소스 코드 기반)이거부됨:

    2011-04-06: jeff****@google.com

    UI 리드와 논의: 있으면 좋겠지만 현재로서는 UI에 옵션을 추가할 의향이 없습니다.

  • 2017년에는문제가 문제 687552로 다시 열렸습니다., 2022년 1분기 현재 이 문제는 여전히 열려 있습니다.

  • 2018년에는 기본 Blink 엔진에 대소문자 구분 페이지 내 찾기 지원이 추가되었습니다.("전체 단어 일치"와 같은 다른 옵션과 함께). 하지만 이 기능은 여전히 ​​Chrome 자체 UI에 노출되지 않습니다.

  • 2022년 1월 31일 현재, 우리는 이러한 옵션을 지원하기 위해 페이지에서 찾기 팝업 상자의 변경 사항을 디자인하고 구현하기 위해 Google에서 UI/UX 팀을 배정하기를 기다리고 있습니다.

답변2

그만큼개발자 도구Chromium 기반 브라우저(Chrome, Edge, Opera,등등) 대소문자 구분 검색을 지원합니다(정규 표현식도 지원합니다!).

현재 브라우저 탭에 대한 개발자 도구를 열려면:

  • Windows에서는 F12한 번만 누르십시오.
  • Windows가 아닌 플랫폼의 경우 또는 사용할 수 없는 경우 + +를 F12사용할 수 있습니다 .CtrlShiftI
    대문자-눈, 아니소문자로)

Chrome 97(2022년 2월)부터 개발자 도구를 사용하여 현재 문서를 3가지 방법으로 검색할 수 있습니다.

1: "검색" 창을 사용합니다.

여기에 이미지 설명을 입력하세요

  • (이 기능은 "모든 파일에서 검색"이라는 이름으로 더 잘 명명될 것입니다.)
  • 먼저 개발자 도구 창을 엽니다( F12또는 Ctrl+ Shift+ I).
  • 그런 다음 개발자 도구 창 내에서 이를 여는 두 가지 방법이 있습니다.
    1. 방법 1: 아무 탭에서나 Escape키를 눌러 콘솔 서랍을 연 다음 세 개의 점을 클릭하여 콘솔 서랍을 엽니다.더 많은 도구메뉴에서 "검색"을 선택하세요.
    2. 방법 2: 오른쪽 상단 메뉴를 클릭하고더 많은 도구을 클릭하고 '검색'을 선택하세요.
  • 열면 검색 텍스트 상자 주변의 버튼을 사용하여 대소문자 구분 및 정규 표현식 모드를 전환할 수 있습니다.
  • 하지만 이 접근 방식을 사용하면 다음과 같은 단점이 있습니다.
    • 이 도구는 원본 텍스트 소스를 검색합니다.모든 파일.js다른 HTML 파일, JavaScript 소스, CSS .css스타일 텍스트 등을 포함하여 현재 페이지에서 사용되므로 "var" 또는 "title"과 같은 용어를 검색하면 관련 없는 결과가 많이 생성됩니다.
      • 다행히 결과는 파일별로 그룹화되어 있으므로 HTML이 아닌 검색 결과를 정신적으로 필터링하면 됩니다.
    • 검색 결과는 현재 DOM의 HTML 표현 대신 HTML 파일 또는 JS 파일의 원본 소스와 일치하므로 이 접근 방식은 소위 검색에는 유용하지 않습니다.단일 페이지 애플리케이션(SPA) 소스 HTML은 스텁 로더일 뿐이며 현재 페이지의 텍스트 콘텐츠를 포함하지 않습니다.
      • 검색은 라이브 DOM이 아닌 텍스트 소스를 통해 수행되기 때문에 검색 결과를 두 번 클릭하여 브라우저의 기본 창을 선택한 요소로 이동할 수 없다는 의미이기도 합니다. 대신 결과를 두 번 클릭하면 개발자 도구의 콘텐츠가 표시됩니다.출처요소 탭 대신 탭.

2: HTML 소스 검색:

여기에 이미지 설명을 입력하세요

  • Chrome의 "소스 보기..." 기능을 사용하면 Ctrl+를 사용 F하여 원본 원시 HTML 소스를 검색할 수 있지만 여전히 우리가 추구하는 대소문자 구분 및 정규식 검색 옵션이 부족합니다.
    • 그러나 개발자 도구 창의출처창에는 별도의 Ctrl+ F검색 기능이 있습니다.하다대소문자 구분 및 정규식 모드를 지원합니다.
  • 검색 창과 마찬가지로 현재 항목을 검색하지 않습니다.살다DOM 트리이므로 SPA와 같이 요소 탭에 표시되는 라이브 DOM에서 원본 HTML이 멀리 떨어져 있는 웹 페이지에서는 이 접근 방식이 작동하지 않습니다.

3: 실시간 DOM 검색(대소문자 구분 XPath 사용):

Live DOM 검색은 대소문자를 구분하지 않는 텍스트 검색만 지원합니다...

여기에 이미지 설명을 입력하세요

...하지만 대소문자를 구분하는 XPath 쿼리도 지원합니다.

여기에 이미지 설명을 입력하세요

  • 에서강요탭에서 Ctrl+를 누릅니다 F. 이를 통해 문서의 전체 DOM 텍스트(HTML 속성 포함)를 검색할 수 있습니다.

  • 이는 라이브 DOM을 검색하므로 SPA 웹 페이지 및 기타 스크립트가 많은 페이지에서 작동합니다.

  • 검색창에는 3가지 모드가 있습니다.

    1. 텍스트 검색(아쉽게도 대소문자만 구분함)
    2. CSS 선택기 검색(대소문자 구분 및 대소문자 구분 선택기를 지원하지만 HTML 요소 이름에만 해당)및 속성: CSS 선택기를 사용하여 DOM 텍스트를 일치시킬 수 없습니다.
      • 대소문자를 구분하는 HTML 속성 검색을 수행하려면 를 사용하십시오 elementName[attributeName="value"s].
      • 대소문자를 구분하지 않는 HTML 속성 검색을 수행하려면 를 사용하십시오 elementName[attributeName="value"i].
    3. XPath 모드(대소문자 구분 검색을 지원합니다)
      • XPath 쿼리는 대소문자를 구분하며 일부 XPath 기능을 사용하여 대소문자를 구분하지 않는 검색을 수행할 수 있습니다.
      • 모든 XPath 쿼리를 사용할 수 있습니다. 예를 들어 //*[contains(text(),'Developer Tools')]위의 스크린샷과 같이 사용해 보세요.
      • 예상한 결과를 얻지 못한 경우 $x()개발자 도구 콘솔에 내장된 기능을 사용하여 XPath 쿼리를 테스트할 수 있습니다 $x("//*[contains(text(),'Developer Tools')]")(예: 위의 스크린샷 참조).

  • 그러나 Chrome 97부터는여전히 대소문자 구분이나 정규 표현식을 지원하지 않습니다.텍스트 검색의 경우 XPath를 배우고 싶지 않은 한 이 접근 방식을 완전히 사용하는 요점을 크게 무효화하지만 Google이 향후 대소문자 구분 옵션을 추가할 경우에 대비해 언급하고 있습니다... 어쩌면... 결국... 언젠가는 바라겠습니다.

  • 이 접근 방식의 또 다른 장점은 원하는 텍스트가 포함된 요소 노드를 두 번 클릭하기만 하면 원래 웹 브라우저 탭의 검색 결과로 직접 이동할 수 있다는 것입니다. 이는 앞서 언급한 소스 텍스트 검색 방식으로는 불가능합니다.

비교:

대소문자 구분 옵션 전체 단어 정규식 모드 XPath 모드 SPA 호환
웹페이지에서 Ctrl+F 아니요 아니요 아니요 아니요 예
소스 보기 > Ctrl+F 아니요 아니요 아니요 아니요 아니요
개발 도구 > 검색 예 아니요 예 아니요 아니요
개발 도구 > 요소 > Ctrl+F XPath만 사용 아니요 아니요 예 예
개발 도구 > 소스 > Ctrl+F 예 아니요 예 아니요 아니요

답변3

다음은 단어를 입력하고 대소문자를 구분하여 검색하는 함수입니다.

var searches = searches || 0;

(function () {
var count = 0,
    text;
text = prompt('Search:', '');
if (text == null || text.length === 0) return;

function searchWithinNode(node, re) {
    var pos, skip, acronym, middlebit, endbit, middleclone;
    skip = 0;
    if (node.nodeType === 3) {
        pos = node.data.search(re);
        if (pos >= 0) {
            acronym = document.createElement('ACRONYM');
            acronym.title = 'Search ' + (searches + 1) + ': ' + re.toString();
            acronym.style.backgroundColor = backColor;
            acronym.style.borderTop = '1px solid ' + borderColor;
            acronym.style.borderBottom = '1px solid ' + borderColor;
            acronym.style.fontWeight = 'bold';
            acronym.style.color = borderColor;
            middlebit = node.splitText(pos);
            endbit = middlebit.splitText(RegExp.lastMatch.length);
            middleclone = middlebit.cloneNode(true);
            acronym.appendChild(middleclone);
            middlebit.parentNode.replaceChild(acronym, middlebit);
            count++;
            skip = 1;
        }
    } else if (node.nodeType == 1 && node.childNodes && node.tagName.toUpperCase() != 'SCRIPT' && node.tagName.toUpperCase != 'STYLE') for (var child = 0; child < node.childNodes.length; ++child) child = child + searchWithinNode(node.childNodes[child], re);
    return skip;
}
var borderColor = '#' + (searches + 8).toString(2).substr(-3).replace(/0/g, '3').replace(/1/g, '6');
var backColor = borderColor.replace(/3/g, 'c').replace(/6/g, 'f');
if (searches % 16 / 8 >= 1) {
    var tempColor = borderColor;
    borderColor = backColor;
    backColor = tempColor;
}
searchWithinNode(document.body, text);
window.status = 'Found ' + count + ' match' + (count == 1 ? '' : 'es') + ' for ' + text + '.';
if (count > 0) searches++;
})();

쉽게 접근할 수 있도록 북마크릿으로 저장할 수 있습니다.

참고자료

정규식 검색 북마크릿

정규식 북마크릿 강조 표시

답변4

당신이 사용할 수있는텍스트 편집을 위한 찾기 및 바꾸기또는찾기+ | 정규식 페이지에서 찾기 도구,Github또는찾기R크롬에서 대소문자 구분 검색을 위한 확장 프로그램입니다.

원하는 키보드 단축키로 쉽게 열 수 있습니다. 또한 RegEx, 전체 단어 검색, 텍스트 찾기 및 바꾸기 등도 수행할 수 있습니다.

관련 정보