ฟังก์ชั่นการไฮไลต์ส่วนใหญ่หมายถึงการเน้นข้อความที่ระบุในพื้นที่ที่ระบุในหน้านั่นคือการระบายสีพื้นหลัง ฟังก์ชั่นนี้มักจะใช้ในหน้าผลการค้นหา
นี่คือวิธีแก้ปัญหาสำหรับคุณในการใช้งานโดยใช้ JavaScript
ก่อนอื่นแนะนำวิธี JavaScript ต่อไปนี้ใน <head>:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
// <! [cdata [
// -------- เริ่มใช้ฟังก์ชั่น fhl (o, flag, rndcolor, url) ------------------ //
ฟังก์ชั่น fhl (o, flag, rndcolor, url) {
/// <summary>
/// ใช้ JavaScript HTML DOM เพื่อเน้นคำเฉพาะหน้า
/// ตัวอย่าง:
/// fhl (document.body, 'ร่มกระดาษ | เธอ');
/// ร่างกายที่นี่หมายถึงเนื้อหาในร่างกายที่เน้น
/// fhl (document.body, 'Hope | ขอโทษ', false, '/');
/// fhl (document.getElementById ('at_main'), 'แสงอาทิตย์ | ลอย | ยาว', จริง, 'search.asp? keyword =');
/// 'at_main' ที่นี่หมายถึงเนื้อหาใน div ด้วย id ที่ไฮไลต์ = 'at_main' search.asp? keyword = หมายถึงที่อยู่ลิงก์ที่เพิ่มลงในคำหลัก
/// ฉันได้เพิ่มพารามิเตอร์ที่นี่และจะใช้ในภายหลัง สามารถเป็นที่อยู่ใดก็ได้
/// </summary>
/// <param name = "o" type = "object">
/// วัตถุวัตถุที่จะเน้น
/// </param>
/// <param name = "flag" type = "String">
/// สตริงเพื่อเน้นคำหรือหลายคำให้ใช้แถบแนวตั้ง (|) เพื่อแยกคำหลายคำ
/// </param>
/// <param name = "rndColor" type = "boolean">
/// ค่าบูลีนไม่ว่าจะแบบสุ่มแสดงสีพื้นหลังข้อความและสีข้อความจริงหมายถึงการแสดงผลแบบสุ่ม
/// </param>
/// <param name = "url" type = "string">
/// uri ไม่ว่าจะเพิ่มลิงก์ไปยังคำที่เน้น
/// </param>
/// <return> </return>
var bgcor = fgcor = '';
if (rndcolor) {
bgcor = frndcor (10, 20);
fgcor = frndcor (230, 255);
} อื่น {
bgcor = '#f0f';
fgcor = 'ดำ';
-
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_, ธง, rndcolor, url);
} อื่นถ้า (o_.nodeType == 3) {
if (! (o_p.nodename == 'a')) {
if (o_.data.search (re) ==-1) ดำเนินการต่อ;
var temp = felea (o_.data, ธง);
o_p.replacechild (อุณหภูมิ, o_);
-
-
-
-
ฟังก์ชั่น felea (ข้อความ, ธง) {
var style = 'style = "พื้นหลังสี:'+bgcor+'; สี:'+fgcor+';" -
var o = document.createElement ('span');
var str = '';
var re = ใหม่ 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 (arguments.length == 1) {
var over = ใต้;
ภายใต้ = 0;
} อื่นถ้า (arguments.length == 0) {
var under = 0;
var over = 255;
-
var r = frandomby (ใต้, มากกว่า) .tostring (16);
r = padnum (r, r, 2);
var g = frandomby (ใต้, มากกว่า) .tostring (16);
g = padnum (g, g, 2);
var b = frandomby (ใต้, มากกว่า) .tostring (16);
b = padnum (b, b, 2);
// defaultStatus = r+''+g+''+b
ส่งคืน '#'+r+g+b;
ฟังก์ชั่น frandomby (ใต้, มากกว่า) {
สวิตช์ (อาร์กิวเมนต์ความยาว) {
กรณีที่ 1: ส่งคืน parseint (math.random ()*ภายใต้+1);
กรณีที่ 2: ส่งคืน parseint (math.random ()*(เกินกว่า-ต่ำกว่า + 1) + ต่ำกว่า);
ค่าเริ่มต้น: return 0;
-
-
ฟังก์ชั่น padnum (str, num, len) {
var temp = ''
สำหรับ (var i = 0; i <len; temp+= num, i ++);
return temp = (temp+= str) .substr (temp.length-len);
-
-
-
// -------- ฟังก์ชั่นสิ้นสุด FHL (O, FLAG, RNDCOLOR, URL) -------------------- //
-
</script>
วิธี FHL ข้างต้นใช้เพื่อให้ได้การเน้นและความหมายของพารามิเตอร์ถูกเขียนไว้ในความคิดเห็น
จากนั้นเรียกใช้วิธี FHL ที่ส่วนท้ายของหน้าเพื่อเน้นข้อความสำหรับพื้นที่ที่ระบุเช่น:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
fhl (document.body, 'ไฮไลต์'); // ระบายสีพื้นหลังของข้อความ "ไฮไลต์" ในพื้นที่ของร่างกายหน้า
</script>
มันง่ายมาก ~