highlight text at run time by pressing search button

Question

I have made a small program that search value from a div...it show first location of the word But i want to make that searched word highligheted after pressing search button at all repeated location..

<html>
<head>

<style type="text/css">
#searchdiv{background-color: #999999;left: 277px;margin: 39px 0 0 84px;padding:5px;width:500px;align:center;}
</style>
<script type="text/javascript">
function search()
{
    var keyword=document.getElementById("keyword").value;
    var str=document.getElementById("area").innerHTML;
    var n=str.search(keyword);
    alert('Location is :'+n);
}
</script>
<body>
<div id="searchdiv">
     <input type="text" id="keyword" name="text" size="70" />
     <input type="button" value="search" id="btn" name="button" onclick="search()"/>
     <br>
     <div style="width:444px;" id="area" name="textarea">rajendra kumar rahar from jhunjhunu</div>
</div>
</body>
<html>

i have tried so many times but couldnot get an idea to make highlight a specific text in div by javascript...???? If anybody have please tell me

score 2 · Answer 1 · answered Nov 16 '13 at 09:38

<html>
<head>

<style type="text/css">
#searchdiv{background-color: #999999;left: 277px;margin: 39px 0 0 84px;padding:5px;width:500px;align:center;}
</style>
<script type="text/javascript">
function search()
{
    var keyword=document.getElementById("keyword").value;
    var str=document.getElementById("area").innerHTML;
    var n=str.search(keyword);
    var anshu=str.substring(n,(n+keyword.length)); 
    //alert('Word Found :'+anshu);

    var af = document.getElementById("area");
    af.innerHTML = str.slice(0, n) 
    af.innerHTML += '<b>' + anshu + '</b>';
    af.innerHTML += str.slice(n+keyword.length);
}
</script>
<body>
<div id="searchdiv">
     <input type="text" id="keyword" name="text" size="70" />
     <input type="button" value="search" id="btn" name="button" onclick="search()"/>
     <br>
     <div style="width:444px;" id="area" name="textarea">rajendra kumar rahar from jhunjhunu</div>
</div>
</body>
<html>

yes anshuVersatile it's working fine...But for multiple location ?? if you have any idea..it will be reallly helpful — Kuldeep Choudhary, Nov 16 '13 at 10:05
yes @anshuVersatile it's working fine...But for multiple location ?? if you have any idea..it will be reallly helpful – — Kuldeep Choudhary, Nov 16 '13 at 10:19

score 1 · Answer 2 · answered Nov 16 '13 at 09:18

1

new_html = "<div class='highlighted'>" + n + "</div>";

answered Nov 16 '13 at 09:18

anshuVersatile

398
2
13

,Sir i don't want to print value of n....i want to make the searched text highligheted that don't have any id... – Kuldeep Choudhary Nov 16 '13 at 09:24
i wrapped your searched text in another
which is having highlighted class means css
– anshuVersatile Nov 16 '13 at 09:29

score 1 · Answer 3 · answered Nov 16 '13 at 09:32

1

You could slice the innerHTML, add a tag, and concat it back. So, at the end of search put:

var a = document.getElementById("area");
a.innerHTML = str.slice(0, n) 
a.innerHTML += '<b>' + keyword + '</b>';
a.innerHTML += str.slice(n+keyword.length);

I don't see any easy way allow the dehighlighting of text, though.

answered Nov 16 '13 at 09:32

Gavin Haynes

1,721
11
21

yes it's good code.Thanks.....but sir i want to make all location highligheted..have you any idea?? – Kuldeep Choudhary Nov 16 '13 at 10:07

score 0 · Accepted Answer · answered Nov 16 '13 at 09:34

0

try something like this

var high = "<div class='highlighted'>"+n+"</div>";
document.getElementById("area").innerHTML = str.replace(n,high);

answered Nov 16 '13 at 09:34

rajesh kakawat

10,826
1
21
40

1

yes it's good code.Thanks.....but sir i want to make all location highligheted..have you any idea?? – – Kuldeep Choudhary Nov 16 '13 at 10:07
replace will replace all value you have passed did you check that – rajesh kakawat Nov 16 '13 at 10:12
yes, maine check kiya h....ye only starting value ko replace krke highlight krta h jiska index n h.. – Kuldeep Choudhary Nov 16 '13 at 10:16
1

http://stackoverflow.com/questions/1144783/replacing-all-occurrences-of-a-string-in-javascript – rajesh kakawat Nov 16 '13 at 10:27

highlight text at run time by pressing search button

4 Answers4