js-检索文字高亮显示

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>
<script>
$(function(){
$("#codearea").bind("click",function(){getSelect($("#codearea"))});
$("#codearea").children().each(function(){
$(this).bind("click",function(){getSelect(this)});
})
})
 function getSelect(obj)
    {
        if(window.getSelection)
        {
var count=0;
var code=window.getSelection()+"";
            if(undefined!=code&&0!=code.length&&""!=code){
var codehtml=$(obj).text();
var newhtml=""
for(var i=0;i<codehtml.length;i++){
var newcode=codehtml.substring(i,i+code.length);
if(code==newcode){
newhtml+="<span style='color:red'>"+newcode+"</span>";
i=i+code.length;
count++;
}else{
newhtml=newhtml+codehtml.substring(i,i+1);
}
}
$(obj).text("");
$(obj).html(newhtml);
alert("共检索到"+count+"条")
}
        }
        else
        {
alert("====")
            alert(document.selection.createRange().text);
        }
        
    }
</script>
<p>js-鼠标左击选中文件检索全文</p>
<div id="codearea">
<div>
List 111111111111111111 logo
</div>
@Test public void shouldDecapitalizeSomeCharsUntilItFindsOneUppercased() throws NoSuchMethodException {
  Assert.assertEquals("urlClassLoader",extractor.nameFor(URLClassLoader.class));
  Assert.assertEquals("bigDecimal",extractor.nameFor(BigDecimal.class));
  Assert.assertEquals("string",extractor.nameFor(String.class));
  Assert.assertEquals("aClass",extractor.nameFor(AClass.class));
  Assert.assertEquals("url",extractor.nameFor(URL.class));
}
</div>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nz-tree组件是一个树形控件,用于在HTML页面中显示树状结构的数据。要实现nz-tree的检索高亮功能,可以按照以下步骤进行操作: 1. 首先,在HTML文件中引入nz-tree组件,并使用适当的属性绑定数据源。 2. 然后,通过设置nz-tree组件的nzSearchValue属性,将要搜索的关键词传递给组件。 3. 在组件中,可以使用Angular的管道过滤器或自定义方法来实现检索功能。可以遍历树的节点,将匹配到的节点标记为高亮。 4. 可以使用CSS样式来设置高亮效果,如设置背景颜色或字体颜色等。 下面是一个示例代码,演示如何在nz-tree中实现检索高亮功能: ``` <tree-root [nodes]="treeData" [(state)]="treeState"></tree-root> ``` ``` // 在组件的代码中,可以使用以下方式实现检索高亮功能 treeData = [ { name: '节点1', children: [ { name: '子节点1' }, { name: '子节点2' } ] }, { name: '节点2', children: [ { name: '子节点3' }, { name: '子节点4' } ] } ]; treeState = {}; searchValue = ''; highlightNodes() { if (this.searchValue) { this.treeData.forEach(node => { if (node.name.includes(this.searchValue)) { this.treeState[node.name] = true; } else { this.treeState[node.name] = false; } if (node.children) { this.highlightChildren(node.children); } }); } else { this.treeState = {}; } } highlightChildren(children) { children.forEach(child => { if (child.name.includes(this.searchValue)) { this.treeState[child.name] = true; } else { this.treeState[child.name] = false; } if (child.children) { this.highlightChildren(child.children); } }); } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值