---
# System prepended metadata

title: EscapeHTML
tags: [已重新整理]

---

# EscapeHTML
## Composable 實作
### useEscapeHTML.js
```javascript=
javascriptexport const useEscapeHTML = () => {
  const escapeHTML = (str) => {
    const escapeMap = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;',
      '/': '&#x2F;'
    };
    
    return str.replace(/[&<>"'\/]/g, (match) => escapeMap[match]);
  };

  return {
    escapeHTML
  };
};
```

## 頁面使用範例
### index.vue
``` htmlembedded=
<template>
  <div>
    <input 
      v-model="content" 
      type="text" 
      placeholder="請輸入內容"
    >
    <div>
      {{ content }}
    </div>
    <button @click="convert">轉換</button>
  </div>
</template>

<script setup>
const { escapeHTML } = useEscapeHTML();

const content = ref('');

const convert = () => {
  content.value = escapeHTML(content.value);
};
</script>
```