初始化

zhuoyuan.wang

2024-06-19 15ebe96f28cadec6a726c5324593a40bbf56205f

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/**
 * 匹配常用字符集 列表
 * 根据业务需求 配置字符集
 * @type {{¥: string, "&": string, "<": string, ">": string}}
 */
const characterList = {
  "<": "&lt;",
  ">": "&gt;",
  "&": "&amp;",
  "¥": "&yen;",
};
// 处理函数
const nodeChild = (node, val) => {
  const children = Array.from(node.children);
  let nodeSplicing = "";
  console.log(val);
  //   判断是否为末级节点
  if (children.length !== 0) {
    // 子节点数据遍历
    children.forEach((item) => {
      // 递归 子节点
      nodeChild(item, val);
      // nodeSplicing 为当前节点的子级拼接后的字符串
      nodeSplicing = nodeSplicing + item.outerHTML;
    });
    // 进行数据替换 防止标签内部 有需要标记的重复数据 导致标红后 标签外露
    // innerHTML 返回标签开始和结束标签之间的HTML
    node.innerHTML = node.innerHTML
      .replaceAll(nodeSplicing, `*^(_)`)
      .toString();
    node.innerHTML = node.innerHTML.replaceAll(
      val,
      `<span style="color:red">${val}</span>`
    );
    node.innerHTML = node.innerHTML.replaceAll("*^(_)", nodeSplicing);
  } else {
    // 末级节点 不需要内部标签数据替换
    node.innerHTML = node.innerHTML.replaceAll(
      val,
      `<span style="color:red">${val}</span>`
    );
  }
};
export default {
  mounted(el, binding) {
    if (!binding.value) return;
    // 进行字符集匹配
    const value = binding.value;
    const valueArr = value.split("");
    valueArr.forEach((item, index) => {
      valueArr[index] = characterList[item] || item;
    });
    // 进行数据匹配 如当前绑定节点 整体并无需要标记内容 不进行DOM 操作
    const idx = el.innerHTML.indexOf(valueArr.join(""));
    if (idx != -1) {
      nodeChild(el, valueArr.join(""));
    }
  }
}