JavaScript实现筛选内容功能
问题遇到的现象和发生背景
<table>
<tr>
<td>邮箱数据A列</td>
<td>邮箱数据B列</td>
<td>邮箱数据C列</td>
</tr>
<tr>
<td><textarea name="textarea2" id="textarea2" style="width:260px; height:300px;" >
111@aaa.com
222@bbb.com
333@ccc.com
444@aaa.com
555@ddd.com
333@ccc.com
666@eee.com
</textarea>
</td>
<td>
<textarea name="textarea2" id="textarea2" style="width:260px; height:300px;" >
222@bbb.com
333@ccc.com
555@ddd.com
999@zzz.com
</textarea>
</td>
<td>
<textarea name="textarea3" id="textarea3" style="width:260px; height:300px;" >
111@aaa.com
444@aaa.com
666@eee.com
</textarea>
</td>
</tr>
<tr>
<td colspan="3">
邮箱数据A列为输入的很多列邮箱数据 textarea</br>
邮箱数据B列为输入的很多列邮箱数据 textarea</br>
邮箱数据C列为从数据A中减去所有数据B中的数据 textarea；输入A和B后自动得出C</br>
</td>
</tr>
</table>
需要的结果是在A和B中输入数据，C自动将A中的数除去所有B中的数据显示在C中
帮忙把代码都详细的写出来哈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td>邮箱数据A列</td>
<td>邮箱数据B列</td>
<td>邮箱数据C列</td>
</tr>
<tr>
<td><textarea name="textarea2" id="textarea1" oninput="handler" style="width:260px; height:300px;" >
111@aaa.com
222@bbb.com
333@ccc.com
444@aaa.com
555@ddd.com
333@ccc.com
666@eee.com
</textarea>
</td>
<td>
<textarea name="textarea2" id="textarea2" oninput="handler" style="width:260px; height:300px;" >
222@bbb.com
333@ccc.com
555@ddd.com
999@zzz.com
</textarea>
</td>
<td>
<textarea name="textarea3" id="textarea3" style="width:260px; height:300px;" >
</textarea>
</td>
</tr>
<tr>
<td colspan="3">
邮箱数据A列为输入的很多列邮箱数据 textarea</br>
邮箱数据B列为输入的很多列邮箱数据 textarea</br>
邮箱数据C列为从数据A中减去所有数据B中的数据 textarea；输入A和B后自动得出C</br>
</td>
</tr>
</table>
<script>
function handler(){
var list_a = document.querySelector('#textarea1').value.split('\n').map(item=>item.trim())
var list_b = document.querySelector('#textarea2').value.split('\n').map(item=>item.trim())
var value_c = []
value_c = list_a.filter(i=>!list_b.includes(i)).join('\n')
document.querySelector('#textarea3').value = value_c
}
const a = document.querySelector('#textarea1');
const b =document.querySelector('#textarea2')
a.addEventListener('input',handler)
b.addEventListener('input',handler)
handler()
</script>
</body>
</html>
前提是 A B 要转换成数组
let A,B,C
B.forEach(item => {
if (A.indexof(item) == -1) {
C.push(item)
}
})
var list_a = document.querySelector('#textareaA').value.split('\n')
var list_b = document.querySelector('#textareaB').value.split('\n')
var value_c = []
value_c = list_a.filter(i=>!list_b.includes(i)).join('\n')
//先把邮箱数据A列 和 邮箱数据B列 数据获取到
var textarea2 = $("textarea[name=textarea2 ]").val();
var textarea3 = $("textarea[name=textarea3 ]").val();
let A,B,C
//然后转换成数组去重
A=textarea2.split(/[(\r\n\s)\r\n\s]+/);
B=textarea3.split(/[(\r\n\s)\r\n\s]+/);
B.forEach(item => {
if (A.indexof(item) == -1) {
C.push(item)
}
}
//最后得出C就是邮箱数据C列的数组 ，循环转换成字符串然后赋值给邮箱数据C列
let str='';
C.forEach(item => {
str+=item+"\n"
}
$("textarea[name=textarea3 ]").val(C);