如何实现定时生成的动态数字永久高亮效果

新数字生成后高亮失效，本质是两个逻辑漏洞：

• 现有高亮函数仅绑定了关键词输入框的输入事件，自动生成新数字、更新DOM的流程里没有触发高亮的逻辑
• 新数字渲染时会直接替换/新增.context容器内的DOM节点，之前打上的高亮标记要么被新内容覆盖，要么没给新内容执行打标记的操作

1. 把高亮逻辑抽离成全局可调用的独立函数，不要仅局限在jQuery加载完成的闭包内
2. 在crunch随机数生成函数完成DOM更新的最后一步，主动调用高亮函数，即可实现新内容自动高亮，无需手动触发输入框。

调整后代码参考 #

高亮逻辑修改 #

// 抽离为全局可访问的高亮函数
function runHighlight() {
    const keyword = $("input[name='keyword']").val();
    const keyword2 = $("input[name='keyword2']").val();
    $(".context").unmark({
        done: () => {
            $(".context").mark(keyword).mark(keyword2, {
                className: 'secondary'
            });
        }
    });
}

$(function() {
    // 保留原有的输入框输入触发高亮的逻辑
    $("input[name^='keyword']").on("input", runHighlight);
});

随机数生成逻辑修改 #

在你原有的crunch函数里，等所有新生成的随机数HTML都插入到.context容器之后，加一行调用高亮函数的代码即可：

function crunch() {
    // 保留你原有的随机数生成逻辑：生成1-100区间的100个随机数、拼接展示用的HTML
    // ...... 省略原有业务代码 ......

    // 把生成的内容插入页面：如果要保留历史所有批次数字就用append()，如果只展示最新一批就用html()
    $(".context").append(/* 你拼接好的随机数HTML内容 */);

    // DOM更新完成后立刻执行高亮
    runHighlight();
}

// 原有的3分钟定时执行逻辑无需改动
setInterval(crunch, 180000);

补充说明：如果需要永久保留所有历史数字的高亮，不要在每次crunch执行时用新内容完全替换.context的内部HTML，改用追加内容的方式即可。每次执行runHighlight()前的unmark()只会清除旧的高亮标记，不会删除数字本身的文本内容，重新执行mark会给所有符合关键词的内容（包括历史内容+新生成内容）重新打上高亮标记，不会出现高亮丢失的问题。

内容的提问来源于stack exchange，提问作者heybubbles