跳脫字元轉換工具 | 程式專案

{"id":580542,"student_id":2589,"content":"{\"html\":\"\u003c!doctype html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n    \u003cmeta charset=\\\"utf-8\\\"\u003e\\n    \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\"\u003e\\n    \u003cmeta http-equiv=\\\"Content-Type\\\" content=\\\"text/html; charset=utf-8\\\"\u003e\\n    \u003cmeta name=\\\"language\\\" content=\\\"zh-TW\\\"\u003e\\n    \u003clink href=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css\\\" rel=\\\"stylesheet\\\" integrity=\\\"sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU\\\" crossorigin=\\\"anonymous\\\"\u003e\\n    \u003ctitle\u003e橘蘋學習平台\u003c/title\u003e\\n    \u003cstyle\u003e\\n        #loadingTool {\\n            top: 50%;\\n            left: 50%;\\n            transform: translate(-50%, -50%);\\n        }\\n        .promptBox {\\n            overflow-x: auto;\\n            white-space: pre-wrap;\\n            word-wrap: break-word;\\n            height: 60vh;\\n        }\\n\\n        button {\\n            width: 100%;\\n        }\\n\\n        span:empty {\\n            display: inline-block !important;\\n        }\\n\\n        span:empty:before {\\n            content: attr(data-placeholder);\\n        }\\n\\n\\n        #liveAlertPlaceholder {\\n            width: 300px;\\n            position: absolute;\\n            right: 30px;\\n            bottom: 30px;\\n        }\\n\\n        .copyMessage {\\n            visibility: visible;\\n            transition: 1s;\\n        }\\n\\n        .form-check {\\n            position: absolute;\\n            right: 35px;\\n            top: 10px;\\n            user-select: none;\\n        }\\n        \\n        textarea {\\n            height: 25vh;\\n        }\\n    \u003c/style\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv id=\\\"app\\\"\u003e\\n        \u003cdiv class=\\\"position-absolute\\\" id=\\\"loadingTool\\\"\u003e\\n            \u003cdiv class=\\\"spinner-border text-secondary\\\" role=\\\"status\\\"\u003e\\n                \u003cspan class=\\\"visually-hidden\\\"\u003eLoading...\u003c/span\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n        \u003cdiv id=\\\"liveAlertPlaceholder\\\"\u003e\u003c/div\u003e\\n        \u003cmain class=\\\"visually-hidden\\\"\u003e\\n            \u003cdiv class=\\\"container py-5\\\"\u003e\\n                \u003cdiv class=\\\"row mb-2\\\"\u003e\\n                    \u003ctextarea class=\\\"w-100 p-2 m-0 border rounded height-auto\\\" v-model=\\\"content\\\"\u003e\u003c/textarea\u003e\\n                \u003c/div\u003e\\n                \u003cdiv class=\\\"row mb-2\\\"\u003e\\n                    \u003ctextarea readonly id=\\\"adjustedContent\\\" class=\\\"w-100 p-2 m-0 border rounded\\\"\u003e{{adjustedContent}}\u003c/textarea\u003e\\n                \u003c/div\u003e\\n                \u003cdiv class=\\\"row mb-2\\\"\u003e\\n                    \u003cbutton @click.prevent=\\\"copyContent\\\" type=\\\"button\\\" id=\\\"copyBtn\\\" class=\\\"btn btn-primary\\\" data-clipboard-target=\\\"#foo\\\"\u003e複製\u003c/button\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n        \u003c/main\u003e\\n    \u003c/div\u003e\\n    \u003cscript src=\\\"https://unpkg.com/vue@3/dist/vue.global.js\\\"\u003e\u003c/script\u003e\\n    \u003cscript src=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js\\\" integrity=\\\"sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ\\\" crossorigin=\\\"anonymous\\\"\u003e\u003c/script\u003e\\n    \u003cscript\u003e\\n        const title = \\\"跳脫字元轉換工具\\\";\\n        const {\\n            createApp\\n        } = Vue\\n        createApp({\\n            data() {\\n                return {\\n                    content: \\\"console.log(`目標值 ${target} 在索引 ${result} 的位置`)\\\",\\n                }\\n            },\\n            computed: {\\n                adjustedContent() {\\n                    return this.content.replaceAll(\\\"`\\\", '\\\\\\\\`').replaceAll(\\\"$\\\", \\\"\\\\\\\\$\\\")\\n                },\\n            },\\n            methods: {\\n                copyContent (event) {\\n                    let output = this.adjustedContent;\\n                    let alertPlaceholder = document.getElementById('liveAlertPlaceholder')\\n                    function alert(message, type) {\\n                        var wrapper = document.createElement('div')\\n                        wrapper.innerHTML = '\u003cdiv class=\\\"copyMessage alert alert-' + type + ' alert-dismissible\\\" role=\\\"alert\\\"\u003e' + message + '\u003c/div\u003e'\\n                        alertPlaceholder.append(wrapper)\\n                        setTimeout(function() {\\n                            wrapper.querySelector(\\\".copyMessage\\\").style.opacity = 0; //  修改div的透明度\\n                        }, 1000);\\n                        setTimeout(function() {\\n                            wrapper.querySelector(\\\".copyMessage\\\").style.visibility = \\\"hidden\\\";\\n                        }, 2000);\\n                        setTimeout(function() {\\n                            wrapper.remove();\\n                        }, 3000);\\n                    }\\n                    navigator.clipboard.writeText(output).then(() =\u003e {\\n                        let alertPlaceholder = document.getElementById('liveAlertPlaceholder')\\n                        alert('複製成功', 'success')\\n                    }, reason =\u003e {\\n                        const el = document.getElementById('adjustedContent')\\n                        el.select();\\n                        document.execCommand('copy');\\n                        alert('複製成功', 'success')\\n                    })\\n                },\\n            },\\n            updated() {\\n                let spans = document.getElementsByTagName('span');\\n                if (!this.addSpanEventListenerOrNot) {\\n                    function clearPaste(e) {}\\n                    if (spans.length !== 0) {\\n                        [...spans].forEach(node=\u003e {\\n                            node.addEventListener('paste', e=\u003e {\\n                                e.preventDefault();\\n                                var text = (e.originalEvent || e).clipboardData.getData('text/plain');\\n                                document.execCommand(\\\"insertHTML\\\", false, text);\\n                            }, false);\\n                        });\\n                    }\\n                    this.addSpanEventListenerOrNot = true\\n                }\\n            },\\n            mounted() {\\n                document.title = `${title} | 橘蘋學習平台`;\\n                let loadingTool = document.getElementById('loadingTool');\\n                let main = document.getElementsByTagName('main')[0];\\n                loadingTool.remove();\\n                main.classList.remove(\\\"visually-hidden\\\");\\n            }\\n        }).mount('#app')\\n    \u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"\",\"js\":\"\"}","created_at":"2023-07-31T11:10:14.695+08:00","updated_at":"2023-07-31T11:43:25.932+08:00","name":"跳脫字元轉換工具","language":"web","screenshot":{"url":"https://cdn2.koding.school/uploads/project/screenshot/580542/5ef7842d3c420218b0cc990cf7f36adc.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":68,"hashid":"qmds3zj26","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}