2009-05-25 2 views
9

나는 몇몇 웹 사이트가 당신이 사용한 검색 엔진 키워드를 강조하고, 페이지를 도달하는 것을 보았다. (예 : Google 검색 목록에 입력 한 키워드)웹 사이트는 검색 엔진에서 사용한 검색어를 어떻게 강조 표시합니까?

검색 엔진에 입력 한 키워드를 어떻게 알 수 있습니까? 그것은 리퍼러 HTTP 헤더 또는 뭔가를 검사합니까? 이 작업을 수행 할 수있는 스크립트는 무엇입니까? 서버 측 또는 JavaScript 일 수도 있습니다. 확실하지 않습니다.

답변

12

이것은 서버 측 또는 클라이언트 측 중 하나에서 수행 할 수 있습니다. 검색 키워드는 HTTP Referer (sic) 헤더를보고 결정됩니다. 자바 스크립트에서는 document.referrer을 볼 수 있습니다.

일단 리퍼러가 있으면 알고있는 검색 엔진 결과 페이지인지 확인한 다음 검색 용어를 구문 분석합니다. 당신이 그것을 꺼내 싶어하고 그것을 취소 URL이-탈출 있도록

http://www.google.com/search?hl=en&q=programming+questions 

q 쿼리 매개 변수는 검색 쿼리입니다 :

예를 들어, 구글의 검색 결과는 다음과 같이 URL이 결과 :

programming questions 

하는 것은 다음 당신은 당신의 페이지의 용어를 검색하고 필요에 강조 표시 할 수 있습니다. 이 서버를 사용하는 경우 HTML을 클라이언트에 보내기 전에 수정해야합니다. 클라이언트 쪽에서 DOM을 조작하면됩니다.

this one과 같은 기존 라이브러리가 있습니다. 이 작업을 수행하는 방법을 알아 보려면 다음 결코 그것을 할 -이 아마 어떤 차이가 너무 늦게 깨닫고

+0

이 답변에서 언급하지 못한 것은 일반적으로 참조자가 신뢰할 수 없다는 것입니다. 모든 브라우저와 구성이 리퍼러를 전송하는 것은 아닙니다 (기본적으로 개인 정보/보안상의 이유로). – SpliFF

+4

네, 그렇습니다. 그러나 검색어의 강조 표시는 편의를 위해서만 수행되므로 큰 문제는 아닙니다. 리퍼러를 얻지 못하면 강조 할 내용이 없습니다. –

+0

감사합니다. 얼마나 훌륭한 대답인가. 특히 도서관. –

7

...

, 난 당신을 구걸 해주십시오. 웹 사용자로서이 작업을 자동으로 수행하는 사이트를 발견 할 때 매우 짜증나게합니다. 대부분의 경우 페이지의 모든 다른 단어를 강조 표시합니다. 한 페이지 내에서 특정 단어를 찾는 데 도움이 필요하다면, 브라우저는 훨씬 더 적절한 "찾기"기능을 내장하고 있습니다.이 기능을 사용하면 전체 페이지를 다시로드하지 않고도 사용하거나 사용하지 않아도됩니다. 멀리 내가 그것을 원하지 않을 때 (어떤 거대한 시간의 대부분)입니다.

+1

대다수의 웹 사용자를 대표하고 있는지 궁금합니다. 도움이 될 것입니다. –

+1

나는 @ 1amzave와 확실히 동의한다. 내 브라우저에는 훌륭한 검색 기능이 있으며 필요에 따라 사용합니다. 하이라이트는 * 매우 * 산만합니다. 특히 빠른 스캔 후에 페이지를 자세히 읽으려고 결정할 경우 특히 그렇습니다. 이 작업을 수행하는 대부분의 사이트에서이 기능을 해제 할 수있는 방법을 제공하지 않는다는 사실은 더욱 심각합니다. * 나는 * 그것을 고치는 방법을 알고 있지만 나는 웹 개발자이다. 대부분의 사람들은 힌트가 없으므로 수십 개의 강조된 단어로 페이지를 읽어야합니다. 그리고 그들이 페이지를 인쇄하거나 HTML 형식으로 누군가에게 전자 메일을 보내기로 결정했다면 앞으로 나아갈 수 있으며 영구적 일 수 있습니다. –

3

기본적으로, 당신은 ...

  1. document.referrer을 검사합니다.
  2. 검색어가 포함 된 GET 매개 변수 도메인 목록이 있습니다.

    var searchEnginesToGetParam = { 
        'google.com' : 'q', 
        'bing.com' : 'q' 
    } 
    
  3. 그것을 적절한 GET의 PARAM을 추출하고, decodeURIComponent().

  4. 용어를 강조 표시 할 텍스트 노드를 구문 분석하십시오 (Replacing text with JavaScript 참조).
  5. 끝났습니다!
관련 문제