텍스트만 찾고 싶지만 어떤 요소에 텍스트가 포함되어 있는지 신경쓰지 않는다면 document.body 에서 innerHTML 을 보면 됩니다. innerHTML - 문자열; 이에 액세스하면 브라우저는 호출한 요소(및 그 하위 요소)의 모든 DOM 요소에 대한 HTML 문자열을 생성합니다. 이는 서버의 원본 콘텐츠가 아니라는 점에 유의하세요. 이는 요소에 액세스할 때 즉시 생성됩니다. 많은 사용 사례에서는 이 문자열을 가져와서 살펴보는 것이 유용할 수 있습니다. 보고 있는 텍스트는 마크업입니다. 예를 들어 "table"이라는 단어를 검색한 경우 문장("We sat down at the table")이나 마크업(
...).
다음은 innerHTML을 사용하여 페이지에서 I'm이라는 단어를 계산하는 예입니다. live copy
(function() ( var pageText = document.body.innerHTML; display("페이지의 "I\"m" 수: " + pageText.match(/I"m/g).length); function display(msg ) ( var p = document.createElement("p"); p.innerHTML = String(msg); document.body.appendChild(p); ) ))();
해당 요소가 정확히 어느 요소에 있는지 알아내려면 페이지 노드를 통과하는 재귀 함수를 작성해야 하며 Text 의 경우 내부 텍스트를 확인해야 합니다. 다음은 기본 예입니다(함수는 걷기 기능). Live Copy | - 마지막에 있는 예시에 대한 참고 사항을 참조하세요.
(function() ( var matchs = , index; walk(matches, document.body, ""); function walk(matches, node, path) ( var child; switch (node.nodeType) ( 사례 1: // 요소 (child = node.firstChild; child; child = child.nextSibling) ( walk(matches, child, path + "/" + node.tagName); ) break; 사례 3: // Text if (node.nodeValue.indexOf( "나"m") !== -1) ( matchs.push("Found it at " + path); ) break; ) ) display("일치 항목을 찾았습니다. (" + match.length + "):"); for (인덱스 = 0; 인덱스< matches.length; ++index) {
display(matches);
}
function display(msg) {
var p = document.createElement("p");
p.innerHTML = String(msg);
document.body.appendChild(p);
}
})();
페이지 ID에서 요소를 찾으려면 다음을 사용하세요.
jQuery
며칠 전 회사로부터 프론트엔드 개발 공석에 대한 테스트 과제를 받았습니다. 물론 작업은 여러 지점으로 구성되었습니다. 그러나 이제 우리는 그중 하나만, 즉 페이지 검색 구성에 대해서만 이야기하겠습니다. 저것들. 필드에 입력된 텍스트를 사용하는 평범한 검색입니다(브라우저의 Ctrl+F와 유사). 이 작업의 특징은 JS 프레임워크나 라이브러리의 사용이 금지된다는 것입니다. 모든 것이 기본 JavaScript로 작성되었습니다.
기성 솔루션 검색 첫 번째 생각: 누군가 이미 정확히 이것을 작성했으므로 Google에서 이를 복사하여 붙여넣어야 합니다. 그래서 나는 그랬다. 한 시간 안에 본질적으로 동일한 방식으로 작동하지만 다르게 작성된 두 개의 좋은 스크립트를 발견했습니다. 나는 내가 더 잘 이해하는 코드를 선택하여 내 홈 페이지에 붙여넣었습니다. 관심있는 분이 계시다면 코드를 가져가겠습니다.
스크립트는 즉시 작동했습니다. 문제가 해결된 줄 알았는데, 알고 보니 작성자에게 상처를 준 게 아닌데, 거기에는 큰 결함이 있었습니다. 스크립트는 태그의 전체 내용을 검색했습니다. 그리고 아마도 짐작하셨겠지만 태그나 해당 속성과 유사한 문자 조합을 검색하면 전체 HTML 페이지가 중단됩니다.
스크립트가 올바르게 작동하지 않은 이유는 무엇입니까? 간단 해. 스크립트는 다음과 같이 작동합니다. 먼저 body 태그의 전체 내용을 변수에 쓴 다음 정규식(텍스트 필드에 입력할 때 사용자가 설정)을 사용하여 일치하는 항목을 찾은 다음 모든 일치 항목을 다음 코드로 바꿉니다. ...일치하는 항목을 찾았습니다...
그런 다음 현재 body 태그를 수신된 새 태그로 바꿉니다. 마크업이 업데이트되고 스타일이 변경되며 발견된 모든 결과가 화면에서 노란색으로 강조 표시됩니다.
문제가 무엇인지 이미 이해하셨겠지만, 더 자세히 설명하겠습니다. 검색 필드에 "div"라는 단어를 입력했다고 가정해 보세요. 상상할 수 있듯이 body 내부에는 div를 포함하여 다른 많은 태그가 있습니다. 그리고 위에 표시된 스타일을 모든 "div"에 적용하면 더 이상 블록이 아니지만 디자인이 깨지기 때문에 이해할 수 없는 것이 됩니다. 결과적으로 마크업을 다시 작성한 후에는 완전히 깨진 웹 페이지가 됩니다. 이렇게 생겼습니다.
보시다시피 페이지가 완전히 손상되었습니다. 간단히 말해서, 스크립트가 작동하지 않는 것으로 판명되었고 나는 처음부터 직접 작성하기로 결정했습니다. 이것이 바로 이 기사의 내용입니다.
그래서 우리는 처음부터 스크립트를 작성합니다. 
이제 우리는 검색 양식에 관심이 있습니다. 빨간색 선으로 동그라미를 쳤어요.
조금 알아 봅시다. 저는 다음과 같이 구현했습니다(지금은 순수 HTML). 태그가 3개 있는 양식입니다.
첫 번째는 텍스트를 입력하는 것입니다.
두 번째는 검색을 취소하는 것입니다(선택 취소).
세 번째는 검색용입니다(발견된 결과 강조 표시).
입력 필드와 2개의 버튼이 있습니다. js.js 파일에 JavaScript를 작성하겠습니다. 이미 생성하여 연결했다고 가정해 보겠습니다.
가장 먼저 할 일은 검색 버튼과 취소 버튼을 클릭할 때 함수 호출을 기록하는 것입니다. 다음과 같이 보일 것입니다:
여기에 무엇이 있고 왜 필요한지 조금 설명하겠습니다.
텍스트 필드의 경우 id="text-to-find"( 이 ID를 사용하여 js의 요소에 액세스합니다.).
취소 버튼에 다음 속성을 제공합니다. type="button" onclick="javascript: FindOnPage("text-to-find",false); 거짓을 반환;"
- 유형: 버튼
- 클릭하면 FindOnPage("text-to-find",false) 함수가 호출됩니다. 텍스트 필드의 ID(false)를 전달합니다.
검색 버튼에 다음 속성을 제공합니다. type="button" onclick="javascript: FindOnPage("text-to-find",true); 거짓을 반환;"
- 유형: 제출(여기에서는 필드를 입력한 후 Enter를 사용할 수 있으므로 버튼이 아니지만 버튼을 사용할 수도 있음)
- 클릭하면 FindOnPage("text-to-find",true) 함수가 호출됩니다. 텍스트 필드의 ID를 전달합니다(true).
아마도 하나 이상의 속성을 발견했을 것입니다. 허위 사실. 이를 사용하여 어떤 버튼을 클릭했는지(검색 취소 또는 검색 시작) 결정합니다. 취소를 클릭하면 false 가 전달됩니다. 검색을 클릭하면 true 가 전달됩니다.
좋아, 계속하자. JavaScript로 넘어가겠습니다. 이미 js 파일을 만들고 DOM에 연결했다고 가정하겠습니다. 코드 작성을 시작하기 전에 한 걸음 물러나서 먼저 어떻게 작동해야 하는지 논의해 보겠습니다. 저것들. 본질적으로 우리는 행동 계획을 작성할 것입니다. 그래서 필드에 텍스트를 입력할 때 해당 페이지를 검색해야 하는데, 태그와 속성은 건드릴 수 없습니다. 저것들. 텍스트 개체만. 이를 달성하는 방법 - 여러 가지 방법이 있다고 확신합니다. 하지만 이제 정규식을 사용하겠습니다.
따라서 다음 정규식은 트레일의 텍스트만 검색합니다. 좋아요: ">... 텍스트...... 텍스트...
