通过按搜索按钮在运行时突出显示文本答案

【问题标题】：highlight text at run time by pressing search button通过按搜索按钮在运行时突出显示文本
【发布时间】：2013-11-16 09:14:28
【问题描述】：

我做了一个小程序，从 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 中的特定文本...???? 如果有人有请告诉我

【问题讨论】：

标签： java javascript jquery css web-deployment

【解决方案1】：

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

【讨论】：

是的 anshuVersatile 它工作正常...但是对于多个位置？如果您有任何想法..这将非常有帮助
是的@anshuVersatile 它工作正常......但是对于多个位置？如果您有任何想法..这将非常有帮助-

【解决方案2】：

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

【讨论】：

，先生，我不想打印 n 的值....我想让没有任何 id 的搜索文本高亮...
我将您搜索的文本包装在另一个
中，该
具有突出显示的类意味着 css

【解决方案3】：

您可以对 innerHTML 进行切片，添加一个标签，然后将其连接回来。因此，在搜索结束时放置：

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

不过，我没有看到任何简单的方法可以取消突出显示文本。

【讨论】：

是的，这是很好的代码。谢谢.....但是先生，我想让所有位置都高亮..你知道吗？？

【解决方案4】：

试试这样的

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

【讨论】：

是的，这是很好的代码。谢谢.....但是先生，我想让所有位置都高亮..你知道吗？ ——
replace 将替换您通过的所有值，您是否检查过
是的，maine check kiya h..ye 只有起始值 ko replace krke highlight krta h jiska index n h..
stackoverflow.com/questions/1144783/…