js 关键词高亮

清静清源

已于 2022-03-17 14:48:12 修改

阅读量318

点赞数

分类专栏： javascript Web 前端基础文章标签： javascript 前端开发语言

于 2021-02-25 19:07:43 首次发布

本文链接：https://blog.csdn.net/qq_35068659/article/details/114100744

版权

javascript 同时被 2 个专栏收录

37 篇文章 1 订阅

订阅专栏

Web 前端基础

32 篇文章 2 订阅

订阅专栏

// 2022/3/17 更新
function highCode(codes, key, color) {
  let text = codes.innerHTML;
  let reg = new RegExp(`\\b${key}\\b`, "g");
  codes.innerHTML = text.replace(
    reg,
    `<span style="color: ${color};">${key}</span>`
  );
}

function highAll(preClass) {
  let code = document.querySelector(`.${preClass}`);
  if (code === null) return;
  const keyWords = [
    {
      int: "red",
    },
    {
      for: "green",
    },
    {
      while: "blue",
    },
    {
      return: "#ccc",
    },
  ];

  keyWords.forEach((value) => {
    Object.entries(value).forEach(([key, color])=>{
      highCode(code, key, color);
    });
  });
}

highAll("code");

南无阿弥陀佛，祝你吉祥！