تشير وظيفة التمييز بشكل أساسي إلى تسليط الضوء على النص المحدد في المنطقة المحددة في الصفحة ، أي تلوين الخلفية. عادة ما تستخدم هذه الوظيفة في صفحات نتائج البحث.
فيما يلي حل لتنفيذه باستخدام JavaScript.
أولاً ، قدم طريقة JavaScript التالية في <head>:
نسخة الكود كما يلي:
<script type = "text/javaScript">
// <! [CDATA [
// -------- بدء الوظيفة FHL (O ، Flag ، rndcolor ، url) ---------------- //
وظيفة fhl (o ، العلم ، rndcolor ، url) {
/// <summary>
/// استخدم JavaScript HTML DOM لتسليط الضوء على الكلمات الخاصة بالصفحة.
/// مثال:
/// fhl (document.body ، 'paper smbrella | she') ؛
/// يشير الجسم هنا إلى المحتوى في الجسم المميز.
/// fhl (document.body ، 'Hope | sorm ، false ،'/') ؛
/// fhl (document.getElementById ('at_main') ، 'Solar | floating | long' ، true ، 'search.asp؟ keyword =') ؛
/// يشير "at_main" هنا إلى المحتوى الموجود في DIV مع معرف مميز = 'AT_MAIN ". Search.asp؟ الكلمة الأساسية = تشير إلى عنوان الارتباط المضافة إلى الكلمة الرئيسية ،
/// لقد أضفت معلمة هنا وسيتم استخدامها لاحقًا. يمكن أن يكون أي عنوان.
/// </summary>
/// <param name = "o" type = "object">
/// كائن ، الكائن ليتم تسليط الضوء عليه.
/// </param>
/// <param name = "flag" type = "string">
/// string ، لتسليط الضوء على الكلمة أو الكلمات المتعددة ، استخدم الأشرطة العمودية (|) لفصل كلمات متعددة.
/// </param>
/// <param name = "rndcolor" type = "boolean">
/// القيمة المنطقية ، سواء لعرض لون خلفية النص بشكل عشوائي ولون النص ، يعني TRUE عرضًا عشوائيًا.
/// </param>
/// <param name = "url" type = "string">
/// URI ، سواء أضاف روابط إلى الكلمات المميزة.
/// </param>
/// <return> </ropressing>
var bgcor = fgcor = '' ؛
if (rndcolor) {
bgcor = frndcor (10 ، 20) ؛
fgCor = frndcor (230 ، 255) ؛
} آخر {
bgcor = '#f0f' ؛
FGCOR = 'Black' ؛
}
var re = new regexp (flag ، 'i') ؛
لـ (var i = 0 ؛ i <o.childnodes.length ؛ i ++) {
var o_ = o.childnodes [i] ؛
var o_p = o_.parentNode ؛
if (o_.nodeType == 1) {
FHL (O_ ، flag ، rndcolor ، url) ؛
} آخر إذا (o_.nodeType == 3) {
if (! (o_p.nodename == 'a')) {
if (o_.data.search (re) ==-1) متابعة ؛
var temp = felea (o_.data ، flag) ؛
o_p.replacechild (temp ، o_) ؛
}
}
}
// -----------------------------------------------
وظيفة فيليا (نص ، العلم) {
var style = 'style = "background-color:'+bgcor+'؛ color:'+fgcor+'؛" '
var o = document.createElement ('span') ؛
var str = '' ؛
var re = new regexp ('('+flag+')' ، 'gi') ؛
إذا (url) {
str = text.replace (re ، '<a href = "' '+url+
"$ 1" '+style+'> $ 1 </a>) ؛ // هنا رابط للكلمة الرئيسية ، ويشير $ $ 1 إلى المعلمات المحددة بعد عنوان الارتباط أعلاه.
} آخر {
str = text.replace (re ، '<span'+style+'> $ 1 </span>') ؛ // تظهر عندما لا تربط
}
O.Innerhtml = str ؛
العودة س ؛
}
// -----------------------------------------------
وظيفة frndcor (تحت ، فوق) {
if (الحجج. length == 1) {
var Over = Under ؛
تحت = 0 ؛
} آخر إذا (الحجج. الطول == 0) {
var under = 0 ؛
var Over = 255 ؛
}
var r = frandomby (under ، over) .ToString (16) ؛
r = padnum (r ، r ، 2) ؛
var g = frandomby (under ، over) .ToString (16) ؛
g = padnum (g ، g ، 2) ؛
var b = frandomby (under ، over) .ToString (16) ؛
B = padnum (b ، b ، 2) ؛
// defaultStatus = r+''+g+''+b
إرجاع '#'+r+g+b ؛
وظيفة frandomby (تحت ، فوق) {
التبديل (الوسائط. الطول) {
الحالة 1: إرجاع parseint (Math.Random ()*تحت+1) ؛
الحالة 2: إرجاع parseint (Math.Random ()*(Over-Under + 1) + Under) ؛
الافتراضي: إرجاع 0 ؛
}
}
وظيفة padnum (str ، num ، len) {
var temp = ''
لـ (var i = 0 ؛ i <len ؛ temp+= num ، i ++) ؛
إرجاع temp = (temp+= str) .substr (temp.length-len) ؛
}
}
}
// -------- وظيفة النهاية FHL (O ، Flag ، RndColor ، URL) -------------------- //
//]]>
</script>
يتم استخدام طريقة FHL أعلاه لتحقيق تسليط الضوء ، ومعنى المعلمات مكتوبة في التعليقات.
ثم اتصل على طريقة FHL في نهاية الصفحة لتسليط الضوء على النص للمنطقة المحددة ، على سبيل المثال:
نسخة الكود كما يلي:
<script type = "text/javaScript">
FHL (document.body ، "Aightlish") ؛ // تلوين خلفية النص "تسليط الضوء" في منطقة جسم الصفحة
</script>
ماذا عن ذلك ، الأمر بسيط للغاية ~