js 查找一个字符串包含多少指定字符串的数量，并在列表中展示出来

需求：通过关键字查找整篇文章中包含多少个该关键字，并将关键字的前后相关的几个字的内容进行数据展示。

前端框架：layui

html：输入部分：

<div class="layui-col-md3">
                <label class="layui-form-label">文章内容关键字</label>
                <div class="layui-input-block">
                    <input type="title" id="content_text" name="content_text" placeholder="请输入内容关键字"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">关键字前后字数</label>
                <div class="layui-input-block">
                    <select id="num" class="layui-input" placeholder="请选择">
                        <option value="">请选择</option>
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="15">15</option>
                        <option value="20">20</option>
                    </select>
                </div>
            </div>

html：关键字数据展示部分

<div id="keywordOpen" style="display: none;">
            <table class="layui-table layui-form" lay-skin="line" style="width: 95%;height: 80%;margin: 20px;">
                <thead>
                <tr>
                    <th class="v_checkbox_width" style="text-align: center;border-right-width: 1px;">序号</th>
                    <th style="text-align: center">相关内容</th>
                </tr>
                </thead>
                <tbody id="keyword_table" class="keyword_table"></tbody>
            </table>

        </div>

js 部分：

通过后台获取数据并展示在table表格上，点击表格中的“关键字查看”按钮弹出展示关键字前后内容的表格

//监听工具条
            table.on('tool(list_filter)', function (obj) {//监听操作栏按钮
                var data = obj.data;
                if (obj.event === 'keyword') {//关键字按钮监听
                    var str = data.content_text;//获取文章内容
                    var keyword =  $("#content_text").val();//关键字
                    if (keyword.length == 0){
                        layuiAlert("请输入文章内容关键字！");
                        return false;
                    }
                    //控制关键字前后文字长度
                    var num= $("#num option:selected").val();
                    //当不选择关键字前后内容长度时，则赋值默认长度
                    if (num.length == 0){
                        num = 10;
                    }
                    var count = 0;//计数初始值
                    var html ='';//拼接显示内容
                    for (var i =0;i<str.length;i++){//循环的次数
                        var c = -1;
                        c= str.indexOf(keyword);
                        //如果存在这样的字符串，则C的值不是-1；
                        if (c != -1){
                            count ++;//计数增加
                            //获取关键字前面所有的字符串信息
                            var left = str.substring(0,str.length - str.substr(c).length);
                            //根据num 截取关键字前面字符串的长度
                            if (left.length > num){
                                left = left.substring(left.length - num,left.length);
                            }
                            //这里的c+keyword.length 而不是c+1，是因为 文章中不会出现连续一样的四个字如"哈哈哈哈"，如果 str =哈哈哈哈，keyword = 哈哈，则是计数3个 而不是2个
                            //将剩余的字符取出放在str中，防止出现数据重复
                            str = str.substr(c+keyword.length);
                            var right = "";
                            //如果关键字右侧的内容长度大于0 并且大于截取的长度时，进行截取，否则直接赋值
                            if (str.length > 0 && str.length > num){
                                right = str.substring(str,num);
                            }else{
                                right = str;
                            }
                            //将每次循环的关键字拼接到table中
                            html+= " <tr id='"+count+"'>" +
                                " <td style='text-align: center;border-right-width: 1px;'>"+count+"</td>\n" +
                                " <td style='text-align: center'>" + left+"<i class='layui-icon' style='color:orange;font-size: 14px;'>"+keyword+"</i>"+ right + "</td>\n" +
                                " </tr>";
                        }
                        console.log("----count---"+count);
                    }
                    $("#keyword_table").html(html);
                    
                    //弹出页面
                    layer.open({
                        type: 1,
                        shade: 0.3,
                        shadeClose: true,
                        title: '关键字信息查看',
                        area: ['750px', '500px'],
                        content: $('#keywordOpen'),
                        closeBtn: 1
                    });
                    
                }
            });

这样查出来的问题就是若果一句话中前后关键字离得比较近，长度小于你需要的关键字前后文字长度，下一条的关键字前面字符长度会不够。

例如：

原始字符串内容：

小朋友 你是否有很多问号 为什么 别人在那看漫画 我却在学画画 对着钢琴说话 别人在玩游戏 我却靠在墙壁背我的 ABC 我说我要一台大大的飞机 但却得到一台旧旧录音机 为什么要听妈妈的话 长大后你就会开始懂了这段话 哼

（引用自歌曲：听妈妈的话/周杰伦）

查询关键字：一台

需求：获取关键字及其前后20个字符长度

第一次取到的值为：戏 我却靠在墙壁背我的 ABC 我说我要一台大大的飞机 但却得到一台旧旧录音机 为什

第二次取到的值为：大大的飞机 但却得到一台旧旧录音机 为什么要听妈妈的话 长大后你

可以看到第二次取到的值中 指定字符串前面的长度不够20，暂时没想好怎么解决。

欢迎评论指正

参考文章：

查找一个字符串中包含有几个指定字符串的数量_判断字符串包含几个指定字符_nick_gu的博客-优快云博客