专栏首页wfaceboss热词搜索_针对关键词的样式实现步骤

热词搜索_针对关键词的样式实现步骤

第一步,页面部分

//项目版本
@{
var t=1;
}
<div>
@foreach(var item in Modle.xxx){//Model为服务器端返回来的总条数数据

3.jquery

 $("#shoWId>button").click(function () {
   var Content=new Array();//存放文本内容的容器
     var guanzi="kkk";//关键字不能为空,所以在项目中需要在此处获取搜索框里面的关键词,并判断不为空是才去执行以下部分
  
     var SelfContent=document.getElementsByClassName("selfClass");     for(var i=0;i<SelfContent.length;i++){
       Content.push(SelfContent[i].innerText);
     }

     for(var k=0;k<Content.length;k++){

         togod(Content[k],guanzi,k);

     }
 });
function  togod(contentStr,key,KID) {

        var set="";
    var positionKey=contentStr.indexOf(key);

    var positionArray=new Array();//存放关键字在文本中的文字的容器
    while (positionKey>-1){
        positionArray.push(positionKey);
        positionKey=contentStr.indexOf(key,positionKey+1);
    }
    for(var j=0;j<positionArray.length;j++){
        var s1=contentStr.substring(0,positionArray[j]);
        var s2='<span  style="color: red;">'+key+'</span>';
        var s3=contentStr.substring(positionArray[j]+key.length,contentStr.length);
             set=s1+s2+s3;//重新组装
    }
      var currentId = "select" + KID;
    document.getElementById("currentId").innerHTML=set;//重新渲染
}

以下是一个例子:

第一,Html部分:

@{
y=0;
var omit="...";
}
 <div class="dxcsearch_content_result_list_title" id="cateMessage@(y)">

                            @if (item.Title.Length > 45)
                            {
                                @item.Title.Substring(0, 45)@omit
                            }
                            else
                            {
                                @item.Title
                            }
 </div>

第二,Jquery部分

<script>
    var content = new Array()
    var cateMessage = "@Model.CateMessage";//关键字是从服务器端返回的
    var contentList = document.getElementsByClassName('dxcsearch_content_result_list_title');
   
    if (cateMessage!="") {
        for (var i = 0; i < contentList.length; i++) {
            content.push(contentList[i].innerText);
        }
        for (var k = 0; k < content.length; k++) {
            searchSubStr(content[k], cateMessage, k);
        }
        function searchSubStr(str, subStr, p) {
            var set = "";
            var pos = str.indexOf(subStr);
            var positions = new Array();
            while (pos > -1) {
                positions.push(pos);
                pos = str.indexOf(subStr, pos + 1);
            }

            for (var j = 0; j < positions.length; j++) {
                var s1 = str.substring(0, positions[j]);

                var s2 = '<span style="color:#fe8081">' + cateMessage + '</span >';

                var s3 = str.substring(positions[j] + cateMessage.length, str.length);

                set = s1 + s2 + s3;

            }
            var currentId = "cateMessage" + p;
            document.getElementById(currentId).innerHTML = set;
        }
    }
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • c# 调用分页(控制器端的)与时间的格式

    wfaceboss
  • ES6系列_2之新的声明方式

    在ES5中我们在声明时只有一种方法,就是使用var来进行声明,ES6对声明的进行了扩展,现在可以有三种声明方式。

    wfaceboss
  • JS控制文字只显示两行,超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案。

    wfaceboss
  • Linux Shell 中的 ()、(())、[]、[[]]、{} 怎么用是不是还傻傻分不清?

    ①命令组。括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用。括号中多个命令之间用分号隔开,最后一个命令可以没有分号,各命...

    昱良
  • MariaDB MySQL变量取值避免四舍五入的方法

    在一些对数据精确度要求比较高的场景(比如资金结算)下,变量取值时不能对变量值进行四舍五入操作,这时候就要做些预处理工作。

    授客
  • ThingJS结合Web地图API开发,让数据展示更加出色!

    三维地图,是为了更好的数据可视化,以便更好地进行数据分析。ThingJS结合Web地图API开发了更多3D功能,让数据展示更加出色!

    森友鹿锘
  • linux 磁盘占满 查看占用

    参考https://blog.csdn.net/ithomer/article/details/89530790 查看某个目录的文件大小并排序(单位为MB)....

    平凡的学生族
  • 在 Silverlight 5 项目中使用 async/await

    .Net 4.5 提供了 async/await 让异步编程回归同步, 不过, async/await 不是只能在 .Net 4.5 下才能使用, 通过使用 A...

    beginor
  • JDK10的新特性:本地变量类型var

    java以面向对象的特性显著于世并得到了蓬勃的发展。在语言的发展过程中,为了让java语言更加简洁和方便使用,JDK也在不断的进行改进。

    程序那些事
  • Js基础教程之变量及数据类型

    基本类型:字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。

    老雷PHP全栈开发

扫码关注云+社区

领取腾讯云代金券