1 css引入方式
2 document.querySelector()与document.getElementById()：querySelector静态的，但是例子不能用，否则查找为空 getElementById动态的，一次到位
3 id 唯一的意思是属性值只能有一个
4 replace() :第二个参数取代第一个
5 \u00A0 空格另一种编码，\s有遗漏时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过滤</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
.baiBtn {
position: absolute;
top: 35%;
left: 30%;
text-align: center;
transform: translate(50%,50%);
}
</style>
</head>
<body>
<div class="baiBtn">
<input class="baiInput" type="text" value="[content]">
<button type="button" class="bai btn btn-primary" id="baiBtn 1">过滤空格</button>
<button type="button" class="bai btn btn-primary" id="baiBtn 2">对照</button>
</div>
<script>
var log = function(){
console.log.apply(console,arguments)
}
var input = document.querySelector(‘.baiInput‘)
var btnPrimar1 = document.getElementById(‘baiBtn 1‘)
var btnPrimar2 = document.getElementById(‘baiBtn 2‘)
btnPrimar1.addEventListener(‘click‘,function(){
input.value = input.value.replace(/(\s|\u00A0)+/g,"")
input.value = input.value.replace(/\b\w+\b/g,function(word){
return word.substring().toUpperCase()
})
})
</script>
</body>
</html>
