在运行时按搜索按钮突出显示文本
highlight text at run time by pressing search button
我做了一个小程序,可以从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中的特定文本的想法......????如果有人有,请告诉我
<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>
new_html = "<div class='highlighted'>" + n + "</div>";
您可以对 innerHTML 进行切片,添加一个标签,然后将其连接回来。因此,在搜索结束时放置:
var a = document.getElementById("area");
a.innerHTML = str.slice(0, n)
a.innerHTML += '<b>' + keyword + '</b>';
a.innerHTML += str.slice(n+keyword.length);
不过,我没有看到任何简单的方法允许对文本进行去突出显示。
尝试这样的事情
var high = "<div class='highlighted'>"+n+"</div>";
document.getElementById("area").innerHTML = str.replace(n,high);
相关文章:
- xmlhttp.responseText不显示文本
- 如何在MVC中使用jQuery在文本框旁边显示文本
- 根据页面的位置突出显示文本中的字符
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 操作javascript变量[HTML]以只显示文本
- 如何显示文本长度,即使它超过ng最大长度
- 如何在悬停时显示文本而不移动页面上的内容
- ASP.NET MVC,在文本框旁边显示文本
- 可单击滚动图像以显示文本框
- 使用鼠标悬停JavaScript/HTML显示文本
- 延迟高亮显示文本区域中的文本
- 选择“选择选项”时显示文本.怎么做
- 无法使用JavaScript在画布上显示文本
- 在不更改HTML源代码的情况下,在管理员TinyMCE编辑器中突出显示文本
- 将鼠标悬停在图像上时显示文本
- javascript:在for循环中使用settimeout来定期显示文本
- 一页主题搜索/用下一个按钮突出显示文本
- JavaScript 在更改选择时不显示文本区域
- 用于突出显示文本的JQuery/JavaScript插件
- 模式显示文本区域内容不是字符串