Skip to content

Commit 90c293e

Browse files
author
hoang.tran12
committed
update detect zero width characters
1 parent d4b5858 commit 90c293e

File tree

2 files changed

+95
-73
lines changed

2 files changed

+95
-73
lines changed

‎scripts/detect_zeroWidthCharacters.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
.zero-width-characters {
1+
.ufs-zero-width-characters-container {
22
background-color: rgba(255, 0, 0, 0.2) !important;
33
position: relative;
44
}
55

6-
.zero-width-characters:after {
6+
.ufs-zero-width-characters-container:after {
77
background: #ffb2b2;
88
bottom: -14px;
99
color: #000;
@@ -18,7 +18,7 @@
1818
right: 0;
1919
}
2020

21-
.zero-width-character:after {
21+
.ufs-zero-width-character:after {
2222
color: red;
2323
content: '\25CF';
2424
}

‎scripts/detect_zeroWidthCharacters.js‎

Lines changed: 92 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -9,79 +9,101 @@ export default {
99
vi: "Phát hiện ký tự ẩn (zero-width) trong văn bản cho trình duyệt, e-mail client, trình soạn thảo văn bản,...\n\nBấm để xem thêm chi tiết.",
1010
},
1111

12-
// Code extracted from https://chrome.google.com/webstore/detail/detect-zero-width-charact/icibkhaehdofmcbfjfpppogioidkilib
13-
onDocumentIdle: () => {
14-
var unicodeCode;
15-
const zeroWidthCharacterCodes = [8203, 8204, 8205, 8288];
12+
onDocumentIdle: detectZeroWidthCharacters,
13+
onClick: detectZeroWidthCharacters,
1614

17-
let elementsWithZWCC = [];
18-
const highlightCharacters = function (element) {
19-
const zeroWidthCharacters = String.fromCodePoint(
20-
...zeroWidthCharacterCodes
21-
);
22-
const regExp = new RegExp(`([${zeroWidthCharacters}])`, "g");
23-
element.innerHTML = element.innerHTML.replace(
24-
regExp,
25-
// '$1<span class="zero-width-character"></span>'
26-
'<span class="zero-width-character"></span>'
27-
);
28-
};
29-
// From: https://jsfiddle.net/tim333/np874wae/13/
30-
const checkElement = function (element) {
31-
const text = textWithoutChildren(element);
32-
[...text].forEach(function (character) {
33-
unicodeCode = character.codePointAt(0);
34-
if (
35-
zeroWidthCharacterCodes.includes(unicodeCode) &&
36-
!elementsWithZWCC.includes(element)
37-
) {
38-
elementsWithZWCC.push(element);
39-
}
40-
});
41-
};
42-
// From: https://stackoverflow.com/a/9340862/535363
43-
const textWithoutChildren = function (element) {
44-
let child = element.firstChild,
45-
texts = [];
46-
while (child) {
47-
if (child.nodeType == 3) {
48-
texts.push(child.data);
49-
}
50-
child = child.nextSibling;
15+
// onClickExtension: () =>
16+
// window.open(
17+
// "https://viblo.asia/p/ky-tu-zero-width-sat-thu-vo-hinh-nam-giua-doan-van-ban-thuan-vo-hai-L4x5xM7qKBM"
18+
// ),
19+
};
20+
21+
// Code extracted from https://chrome.google.com/webstore/detail/detect-zero-width-charact/icibkhaehdofmcbfjfpppogioidkilib
22+
function detectZeroWidthCharacters() {
23+
let containerClass = "ufs-zero-width-characters-container";
24+
let spanClass = "ufs-zero-width-character";
25+
26+
let intervalKey = "ufs_detect_zero_width_interval";
27+
let existSpans = Array.from(document.querySelectorAll(`.${spanClass}`));
28+
if (existSpans.length > 0) {
29+
if (intervalKey in window) {
30+
clearInterval(window[intervalKey]);
31+
}
32+
existSpans.forEach((el) => {
33+
el.remove();
34+
});
35+
Array.from(document.querySelectorAll(`.${containerClass}`)).forEach(
36+
(el) => {
37+
el.classList.remove(containerClass);
5138
}
52-
return texts.join("");
53-
};
54-
const checkPage = function () {
55-
const allElements = document.getElementsByTagName("*");
56-
[...allElements].forEach(checkElement);
57-
elementsWithZWCC.forEach(function (element) {
58-
element.classList.add("zero-width-characters");
59-
highlightCharacters(element);
60-
});
61-
};
39+
);
40+
return;
41+
}
42+
43+
var unicodeCode;
44+
const zeroWidthCharacterCodes = [8203, 8204, 8205, 8288];
6245

63-
(async () => {
64-
// inject css
65-
UsefulScriptGlobalPageContext.DOM.injectCssFile(
66-
await UsefulScriptGlobalPageContext.Extension.getURL(
67-
"scripts/detect_zeroWidthCharacters.css"
68-
)
69-
);
46+
let elementsWithZWCC = [];
47+
const highlightCharacters = function (element) {
48+
const zeroWidthCharacters = String.fromCodePoint(
49+
...zeroWidthCharacterCodes
50+
);
51+
const regExp = new RegExp(`([${zeroWidthCharacters}])`, "g");
52+
let textToAdd = '<span class="' + spanClass + '"></span>';
53+
element.classList.add(containerClass);
54+
element.innerHTML = element.innerHTML
55+
.replace(textToAdd, "")
56+
.replace(regExp, "$1" + textToAdd);
57+
};
58+
// From: https://jsfiddle.net/tim333/np874wae/13/
59+
const checkElement = function (element) {
60+
const text = textWithoutChildren(element);
61+
[...text].forEach(function (character) {
62+
unicodeCode = character.codePointAt(0);
63+
if (
64+
zeroWidthCharacterCodes.includes(unicodeCode) &&
65+
!elementsWithZWCC.includes(element)
66+
) {
67+
elementsWithZWCC.push(element);
68+
}
69+
});
70+
};
71+
// From: https://stackoverflow.com/a/9340862/535363
72+
const textWithoutChildren = function (element) {
73+
let child = element.firstChild,
74+
texts = [];
75+
while (child) {
76+
if (child.nodeType == 3) {
77+
texts.push(child.data);
78+
}
79+
child = child.nextSibling;
80+
}
81+
return texts.join("");
82+
};
83+
const checkPage = function () {
84+
const allElements = document.getElementsByTagName("*");
85+
[...allElements].forEach(checkElement);
86+
elementsWithZWCC.forEach(function (element) {
87+
highlightCharacters(element);
88+
});
89+
};
7090

71-
// Check Page
72-
checkPage();
73-
setTimeout(checkPage, 5000);
91+
(async () => {
92+
// inject css
93+
UsefulScriptGlobalPageContext.DOM.injectCssFile(
94+
await UsefulScriptGlobalPageContext.Extension.getURL(
95+
"scripts/detect_zeroWidthCharacters.css"
96+
)
97+
);
7498

75-
// Check page again when any input field is changed
76-
const inputs = document.querySelectorAll("input");
77-
[...inputs].forEach(function (input) {
78-
input.addEventListener("change", checkPage);
79-
});
80-
})();
81-
},
99+
// Check Page
100+
checkPage();
101+
window[intervalKey] = setInterval(checkPage, 5000);
82102

83-
onClickExtension: () =>
84-
window.open(
85-
"https://viblo.asia/p/ky-tu-zero-width-sat-thu-vo-hinh-nam-giua-doan-van-ban-thuan-vo-hai-L4x5xM7qKBM"
86-
),
87-
};
103+
// Check page again when any input field is changed
104+
const inputs = document.querySelectorAll("input");
105+
[...inputs].forEach(function (input) {
106+
input.addEventListener("change", checkPage);
107+
});
108+
})();
109+
}

0 commit comments

Comments
 (0)