<!DOCTYPE html>
<html>
<head>
<title>测试文字是否相等</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.clear {
clear: both;
overflow: hidden;
height: 0;
}
h2 {
color: #D84D2D;
font-size: 130%;
font-weight: bold;
float: left;
line-height: 1.5em;
width: 100%;
padding-left: 5px;
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px solid #ddd;
}
.content {
float: left;
width: 50%;
padding: 10px;
box-sizing: border-box;
}
.content textarea {
width: 100%;
height: 400px;
resize: none;
box-sizing: border-box;
background-color: #f5f5f5;
font-family: Courier New!important;
font-size: 12px!important;
border: 1px solid #ccc;
padding: 5px;
overflow: auto;
margin: 5px 0;
color: #000;
}
.button {
display: inline-block;
background-color: #D84D2D;
padding: 10px 20px;
margin: 10px;
color: #fff;
text-decoration: none;
font-weight: bold;
cursor: pointer;
margin-right: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.5);
text-shadow: 0 -1px 1px rgba(0,0,0,.25);
vertical-align: middle;
}
.button:focus {
outline: none;
}
p {
margin: 10px;
}
p span {
color: #D84D2D;
}
</style>
<body>
<div>
<div class="content">
<h2>输入pdf文字</h2>
<textarea id="contentA"></textarea>
</div>
<div class="content">
<h2>输入word文字</h2>
<textarea id="contentB"></textarea>
</div>
<div class="clear"></div>
<div>
<button class="button" id="js_button">过滤</button>
<span style="display: inline-block;">
<p id="js_tips"></p>
</span>
</div>
<div>
<div class="content">
<h2>pdf输出结果</h2>
<p id="js_deferA"></p>
</div>
<div class="content">
<h2>word输出结果</h2>
<p id="js_deferB"></p>
</div>
</div>
<script type="text/javascript">
var button = document.getElementById('js_button')
var tips = document.getElementById('js_tips')
var deferA = document.getElementById('js_deferA')
var deferB = document.getElementById('js_deferB')
var exp = /[\u4e00-\u9fa5_a-zA-Z0-9@]+/gi
button.addEventListener('click', function() {
var contentA = document.getElementById('contentA')
var contentB = document.getElementById('contentB')
var valueA = contentA.value
var valueB = contentB.value
// if(valueA == valueB) {
// tips.innerHTML = '恭喜你完全相等'
// deferA.innerHTML = ''
// deferB.innerHTML = ''
// } else {
var expA = valueA.match(exp).join('')
var expB = valueB.match(exp).join('')
var length = expB.length
if(expA.length > expB.length) {
length = expA.length
}
var pdf = ''
var word = ''
var defA = []
var defB = []
for(var i = 0; i < length; i++) {
if(expA[i] == expB[i]) {
pdf += '<span>'+ (expA[i] || ' ') +'</span>'
word += '<span>'+ (expB[i] || '') +'</span>'
defA.push(expA[i] || '')
defB.push(expB[i] || '')
} else {
pdf += (expA[i] || '')
word += (expB[i] || '')
}
}
console.log(pdf)
console.log(word)
deferA.innerHTML = pdf
deferB.innerHTML = word
// if(expA == expB) {
// tips.innerHTML = '恭喜你是一样的'
// deferA.innerHTML = ''
// deferB.innerHTML = ''
// } else {
// tips.innerHTML = '糟了有的地方不一样'
// var length = expB.length
// if(expA.length > expB.length) {
// length = expA.length
// }
// var pdf = ''
// var word = ''
// var defA = []
// var defB = []
// for(var i = 0; i < length; i++) {
// if(expA[i] != expB[i]) {
// pdf += '<span>'+ (expA[i] || ' ') +'</span>'
// word += '<span>'+ (expB[i] || '') +'</span>'
// defA.push(expA[i] || '')
// defB.push(expB[i] || '')
// } else {
// pdf += (expA[i] || '')
// word += (expB[i] || '')
// }
// }
// console.log(pdf)
// console.log(word)
// deferA.innerHTML = pdf
// deferB.innerHTML = word
// }
// }
})
</script>
</div>
</body>
</html>
网友评论