검색 엔진 인용을 사용하여 페이지 키워드 강조

대부분의 웹 검색 엔진의 "웹 스냅샷" 기능을 사용할 때 반환된 스냅샷 페이지에 키워드 강조 표시가 추가됩니다. 이는 웹페이지에서 검색된 콘텐츠를 찾는 데 매우 편리합니다. Google 스냅샷의 키워드 강조 표시에는 단어 분할 기능도 포함되어 있으며, 다른 단어는 다른 색상으로 표시됩니다. 하지만 %!#^*&$!로 인해 Google의 웹 페이지 스냅샷이 매우 불안정하므로 이 키워드 강조 기능을 직접 추가해 보겠습니다.

아래와 같이 Google에서 apache asp.net이라는 키워드를 검색했을 때 결과는 다음과 같습니다.

결과의 링크를 클릭하고 자체 페이지로 이동한 후 다음 키워드를 강조 표시하면 사용자가 페이지에서 관심 있는 콘텐츠를 더 쉽게 찾고 찾을 수 있습니까?

좀 더 자세히 살펴보겠습니다. IE의 주소는 http://birdshome.cnblogs.com/archive/2005/11/17/Apache.html 이므로 페이지에서 강조 표시되고 검색을 통해 검색할 수 있는 방법은 무엇입니까? 엔진은 어떻습니까? 여기서는 문서의 리퍼러 속성을 사용하여 검색 엔진 유형 및 키워드 정보를 얻습니다. 예를 들어 위의 예에서 document.referrer 속성은 다음과 같습니다. http://www.google.com/search?hl=zh-CN&newwindow=1&q=apache+asp.net&btnG=%E6%90%9C%E7% B4%A2&lr =lang_zh-CN%7Clang_zh-TW . 특정 검색엔진의 키워드를 JavaScript를 통해 분석한 후, 페이지 DOM 객체를 조작하여 하이라이팅 기능을 구현합니다. 그러나 긴 연속 중국어 키워드의 경우, 이 클라이언트 측 강조 솔루션은 연고와 같은 단어 분할 기능을 제공할 수 없습니다.

현재 페이지에 검색 키워드 하이라이팅을 구체적으로 구현하는 코드는 다음과 같습니다. 해당 페이지의 document.body.onload 이벤트에 넣고 호출하면 됩니다. :) function FriendlyDisplayForSearch()
{
var url = new UrlBuilder(document.referrer);
if (url.m_Success)
{
var 호스트 = url.m_Host.toLowerCase();
if (host.indexOf('.google.') != -1 )
{
var 키워드 = url.GetValue('q', 'UTF8');
if(키워드)
{
var ht = 새로운 하이라이트텍스트();
ht.Execute(키워드);
}
}
else if (host.indexOf('.baidu.') != -1 )
{

}
}
}// 인코딩과 사용 빈도의 관계로 인해 현재는 Google 검색 엔진

기능인 HighlightText(range)

{
if(범위)
{
this.m_Range = 범위;
}
또 다른
{
this.m_Range = document.body.createTextRange();
}
this.m_Keyword = '';

this.toString = 함수()
{
'[클래스 HightlightText]'를 반환합니다.
};
}

하이라이트텍스트.prototype.Execute = 함수(키워드)
{
if(키워드)
{
this.m_Keyword = 키워드;
}
if ( this.m_Range && this.m_Keyword )
{
var 분리자 = ' ';
if ( this.m_Keyword.indexOf(' ') == -1 )
{
구분자 = '+';
}
var 키워드 = this.m_Keyword.split(separater);
var 북마크 = this.m_Range.getBookmark();
for ( var i=0 ; i < 키워드.길이 ; ++i )
{
var 키워드 = 키워드[i];
if (키워드 && 키워드.길이 > 1)
{
동안(this.m_Range.findText(키워드[i]))
{
this.m_Range.execCommand('ForeColor', 'false', 'highlighttext');
this.m_Range.execCommand('BackColor', 'false', 'highlight');
this.m_Range.collapse(false);
}
this.m_Range.moveToBookmark(bookmark);
}
}
}
}