Tampermonkey用Mark.js高亮文本致Angular站点按钮失效及优化求助

按钮无法点击问题修复 #

核心原因定位 #

• 依赖冲突：脚本重复加载了两个版本的jQuery，同时引入了原生Bootstrap JS，和站点使用的ng-bootstrap指令冲突，覆盖了Angular绑定的按钮点击事件逻辑
• DOM操作冗余：每次新tr加载时全量遍历页面所有tr节点，频繁修改DOM触发Angular异常变更检测，导致原有节点事件失效

修复步骤 #

1. 删除冲突依赖，调整脚本头如下，移除多余的jQuery和原生Bootstrap JS引入：

// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// @require      https://raw.githubusercontent.com/julmot/mark.js/master/dist/mark.js
// @include     http://localhost/vortek_php/*
/* globals waitForKeyElements, Mark */
// @grant       GM_addStyle

2. 调整回调逻辑，仅处理新加载的tr节点，避免全量遍历：

// 注入全局高亮样式，避免逐节点设置行内样式
GM_addStyle(`
.highlight-keyword {
    color: black !important;
    background-color: coral !important;
}
`);

waitForKeyElements (
    'tr',
    handleNewTr
);

function handleNewTr(newTr){
    // 仅处理未添加过高亮的节点
    if (!newTr.querySelector('.highlight-keyword')) {
        const markInstance = new Mark(newTr);
        markInstance.mark("Sta Sword bee pokemon", {
            className: "highlight-keyword"
        });
    }
    // 返回true标记当前节点已处理，无需重复触发
    return true;
}

高亮功能优化 #

mark.js原生支持不区分大小写、部分匹配的需求，只需添加对应配置项即可：

markInstance.mark("Sta Sword bee pokemon", {
    className: "highlight-keyword",
    caseSensitive: false, // 关闭大小写区分
    accuracy: "partially", // 开启部分匹配，无需整词完全命中
    separateWordSearch: true // 自动拆分多关键词独立匹配
});

如果需要自定义匹配规则，也可以将关键词整理为数组传入，匹配效率更高：

const keywordList = ["sta", "sword", "bee", "pokemon"];
markInstance.mark(keywordList, {
    // 同上配置项
});

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