Source code
Revision control
Copy as Markdown
Other Tools
"use strict";
/**
* Find characters in a container and creates CSS Highlights for them.
* @param {Node} container - The container node to search within.
*/
function highlightChars(container) {
const chars = {
"「": "open",
"」": "close",
"（": "open",
"）": "close",
"。": "dot",
"、": "dot",
"．": "dot",
"，": "dot",
"：": "colon",
"；": "colon",
};
const style = [
"::highlight(open) { background-color: orange; }",
"::highlight(close) { background-color: springgreen; }",
"::highlight(dot) { background-color: skyblue; }",
"::highlight(colon) { background-color: wheat; }",
].join("\n");
const style_element = document.createElement("style");
style_element.textContent = style;
document.head.appendChild(style_element);
const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
while (walker.nextNode()) {
const textNode = walker.currentNode;
const text = textNode.nodeValue;
for (let i = 0; i < text.length; ++i) {
const char = text[i];
const name = chars[char];
if (!name) {
continue;
}
let highlight = CSS.highlights.get(name);
if (!highlight) {
highlight = new Highlight();
CSS.highlights.set(name, highlight);
}
const range = document.createRange();
range.setStart(textNode, i);
range.setEnd(textNode, i + 1);
highlight.add(range);
}
}
}
window.addEventListener("load", () => {
const container = document.getElementById("container");
highlightChars(container ? container : document.body);
});