<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
使用 cure53/DOMPurify 来防止xss 攻击
</title>
</head>
<body>
<div class="container">
<form action="" class="add-comment">
<textarea name="" id="" cols="30" rows="10" class="comment-text"></textarea>
<button>Post Comment</button>
</form>
<div class="comment"></div>
</div>
<script>
const addCommentForm = document.querySelector('add-comment');
const textarea = document.querySelector('.comment-text');
const commentDiv = document.querySelector('.comment')
const user = 'zhang';
function sanitize(string,...values){
const dirty = strings.reduce((pre,curr,i) => `${pre} ${curr} ${values[i] || ' '},' '`)
}
addCommentForm.addEventListener('sumbit',function(event){
event.preventDefault();//Event 接口的 preventDefault()方法，告诉user agent：如果此事件没有被显式处理，那么它默认的动作也不要做
//（因为默认是要做的）。此事件还是继续传播，除非碰到事件侦听器调用stopPropagation() 或stopImmediatePropagation()，才停止传播。
const newComment = textarea.value.trim();//去除字符串的头尾空格:
if(newComment){
commentDiv.innerHTML = sanitize`
<div class="comment-header">${user}</div>
<div class="comment-body">${textarea}</div>
`
}
textarea.value = newComment;
})
</script>
</body>
</html>
