Highlight Text in HTML

January 02, 2005

Highlight Text in HTML

Search and highlight some words in HTML Text with out changing in HTML BODY TEXT.
For this, you can use of one function in client side with JavaScript.
In below sample you can see that all "windows" word highlighted after line.
We use this way from Google site ;-)

<script> 
function hl(w) 
{ 
    if (document.body &&amp;amp; document.body.createTextRange) 
    { 
    var rng = document.body.createTextRange(); 
    rng.moveToElementText(document.all.start); 
    while(rng.findText(w,1,2)) 
        {rng.pasteHTML("<span style='color:black; background-color:#ffff88'>" + rng.text + "</span>"); rng.collapse(false);} 
    } 
} 
window.onerror=new Function(';'); 
</script> 
<body onload="hl('highlight'); hl('windows');"> 
This is a sample with highlight function. In this sample Windows is highlight. this methid have a client side highlight process that use Java Script. 
<hr id=start> 
This is a sample with highlight function. In this sample Windows is highlight. this methid have a client side highlight process that use Java Script. 
</body>

یک راه برای Highlight نمودن یک کلمه در تمام متن یک HTML همون راه احمقانه ای است که خودم رفتم ... اونم اینکه بنشینید با کلاس های مایکروسافت برنامه اون رو بنویسید .. یعنی متن رو بخونین و بعدش با تشخیص تگ های HTML به اون کلمات پیدا شده توسط تگ span رنگ پس زمینه بدین .. با این کار علاوه بر Highlight شدن کلمات در یک HTML رفتگانتون هم جلوی چشمتون میان ...
اما راه بهتر استفاده از Java Script هستش .. این هم نمونه کد که از روی Google کش رفته شده. در مثال بالا و توسط این روش کلمه Windows در تمام متن بعد از خطی که توسط hr کشیده شده Highlight می گردد.

Software Development

January 02, 2005

Highlight Text in HTML

No comments: