// ==UserScript==
// @name         TAPD 高亮关键字
// @namespace    hl_qiu163@163.com
// @version      0.1.1
// @description  用于在 TAPD 需求详情页面高亮关键字，便于快速定位自己关心的字段
// @author       qiuhongliang
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tapd.cn
// @match        https://www.tapd.cn/*/prong/stories/view/*
// @grant        none
// @license      GPL
// @downloadURL none
// ==/UserScript==

(function () {
  "use strict";

  // 需要高亮的字段列表
  keyListLight(["发布计划", "接口线上测试", "开发人员"]);

  function keyListLight(keyList, bcgColor) {
    // 获取到右侧“基本信息”模块内容，不直接用 id 定位具体 id，而用正则匹配，是因为右侧的字段列会随时变，id 也会变。
    var bodyDiv = document.querySelector(
      "#subject-content > div.tui-t4o.subject_view > div.tui-b.content-right"
    );
    var bodyHtml = bodyDiv.innerHTML;
    bcgColor = bcgColor || "PaleTurquoise"; // 默认背景色

    var htmlTagReg = new RegExp("<.*?>", "ig"); //匹配html标签
    var htmlTagDivInfo = bodyHtml.match(htmlTagReg); //存放html元素的数组

    var randKey = "abc" + new Date().getTime() + "xyz"; // 组装随机数字，用于临时替换标签，避免要高亮的数据和标签重复
    bodyHtml = bodyHtml.replace(htmlTagReg, randKey); //替换html标签
    console.log(bodyHtml);

    // 替换关键字，使其高亮
    for (let key of keyList) {
      let keyReg = new RegExp(key, "g");
      let sKey =
        "<span style='background-color: " + bcgColor + ";'>" + key + "</span>";
      bodyHtml = bodyHtml.replace(keyReg, sKey); //替换key
    }

    // 恢复html标签
    var num = -1;
    bodyHtml = bodyHtml.replace(new RegExp(randKey, "g"), function () {
      num++;
      return htmlTagDivInfo[num];
    });

    bodyDiv.innerHTML = bodyHtml;
  }
})();