按搜索按钮在运行时突出显示文本

时间:2013-11-16 09:14:28

标签: java javascript jquery css web-deployment

我制作了一个小程序,可以从div中搜索值...它显示了单词的第一个位置 但是我想在所有重复的位置按下搜索按钮后,将搜索到的单词高亮显示..

<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>

我已经尝试了很多次但是无法通过javascript突出显示div中的特定文本...... ???? 如果有人请告诉我

4 个答案:

答案 0 :(得分:2)

<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>

答案 1 :(得分:1)

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

答案 2 :(得分:1)

您可以对innerHTML进行切片,添加标记并将其连接起来。所以,在搜索结束时:

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

但是,我没有看到任何简单的方法允许对文本进行取景。

答案 3 :(得分:0)

尝试这样的事情

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