Last active
May 30, 2025 04:08
-
-
Save smcllns/a3b61eea0d817cec53f8926f968dad24 to your computer and use it in GitHub Desktop.
Replaces straight quotes with curly quotes (smart quotes) within text on a html page. I'm using this script to just update the html page when rendered, since Prettier doesn't support and VS Code solutions weren't great.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Replace straight quotes with curly quotes | |
| // Add to a html page inside a <script> tag | |
| (() => { | |
| const curly = (s) => | |
| s | |
| .replace(/(^|[\s([{])"(?=\S)/g, "$1\u201C") // opening double | |
| .replace(/(?<!\d)"/g, "\u201D") // closing double | |
| .replace(/(^|[\s([{])'(?=\S)/g, "$1\u2018") // opening single | |
| .replace(/(?<!\d)'/g, "\u2019"); // closing single | |
| const curlyAllTextNodes = (node) => { | |
| if (node.nodeType === Node.TEXT_NODE) { | |
| node.nodeValue = curly(node.nodeValue); | |
| } else if (node.nodeType === Node.ELEMENT_NODE && !/(script|style|code|pre)/i.test(node.tagName)) { | |
| for (let child of node.childNodes) curlyAllTextNodes(child); | |
| } | |
| }; | |
| curlyAllTextNodes(document.body); | |
| })(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Example Usage</title> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| } | |
| pre { | |
| background-color: #eee; | |
| border-radius: 0.5rem; | |
| padding: 0.5rem 1rem; | |
| font-family: monospace; | |
| overflow-x: auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Hello World. It's good to see you again.</h1> | |
| <div class="subtitle"> | |
| <p>The world replies, "It's good to see you my friend."</p> | |
| </div> | |
| <pre> | |
| <code> | |
| function example() { | |
| console.log("Quotes inside a `code` block aren't changed."); | |
| }</code> | |
| </pre> | |
| <script> | |
| (() => { | |
| const curly = (s) => | |
| s | |
| .replace(/(^|[\s([{])"(?=\S)/g, "$1\u201C") // opening double | |
| .replace(/(?<!\d)"/g, "\u201D") // closing double | |
| .replace(/(^|[\s([{])'(?=\S)/g, "$1\u2018") // opening single | |
| .replace(/(?<!\d)'/g, "\u2019"); // closing single | |
| const curlyAllTextNodes = (node) => { | |
| if (node.nodeType === Node.TEXT_NODE) { | |
| node.nodeValue = curly(node.nodeValue); | |
| } else if (node.nodeType === Node.ELEMENT_NODE && !/(script|style|code|pre)/i.test(node.tagName)) { | |
| for (let child of node.childNodes) curlyAllTextNodes(child); | |
| } | |
| }; | |
| curlyAllTextNodes(document.body); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment