<button type="button" onclick="mark('寅')">寅</button> <script> // Start Highlight text on whole page. function mark(char) { let contentElement = document.getElementById('sentences'); let textNodes = getTextNodes(contentElement); // Clear previous highlights unmarkAll(textNodes); // Use a regular expression to find all occurrences of the character let regex = new RegExp(char, 'g'); textNodes.forEach(node => { let textContent = node.textContent; let matches = textContent.matchAll(regex); for (const match of matches) { let range = document.createRange(); range.setStart(node, match.index); range.setEnd(node, match.index + match[0].length); let markElement = document.createElement('mark'); range.surroundContents(markElement); } }); } function getTextNodes(element) { let walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false); let textNodes = []; while (walker.nextNode()) { textNodes.push(walker.currentNode); } return textNodes; } function unmarkAll(nodes) { nodes.forEach(node => { let parentNode = node.parentNode; if (parentNode && parentNode.nodeName === 'MARK') { let textNode = document.createTextNode(node.textContent); parentNode.replaceWith(textNode); } }); } // End Highlight text on whole page. </script>