html里引入了vue和element ui
根据\n为一行解析和去重操作
效果图如下：
话不多说，上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- import CSS -->
<link rel="stylesheet" href="./css/index.css" />
<link rel="icon" href="./favicon.ico" />
<title>key解析</title>
</head>
<body>
<div id="app" style="margin-left: 30px">
<div style="width: 40%; float: left">
<div><h3>key解析框</h3></div>
<div>
<el-input
id="list"
type="textarea"
:rows="10"
placeholder="请输入内容"
v-model="textarea"
>
</el-input>
<div>
<el-button
size="small"
style="width: 200px; margin-top: 19px"
@click="process"
type="primary"
>解 析 key</el-button
>
<el-button
size="small"
style="width: 200px; margin-top: 19px; float: right"
@click="quchongClick"
type="primary"
>去重</el-button
>
</div>
<div>
<h3 style="float: left">key输出框</h3>
</div>
<el-input
id="list"
type="textarea"
:rows="10"
placeholder="请输入内容"
v-model="trem"
>
</el-input>
</div>
</div>
<div style="width: 40%; float: left; margin-left: 20px">
<div><h3>去重输出框</h3></div>
<el-input
id="list"
type="textarea"
:rows="26"
placeholder="请输入内容"
v-model="quchongtext"
>
</el-input>
</div>
</div>
</body>
<!-- import Vue before Element -->
<script src="./js/vue.js"></script>
<!-- import JavaScript -->
<script src="./js/index.js"></script>
<script>
new Vue({
el: "#app",
data: {
textarea: "",
trem: "",
quchongtext: "",
},
methods: {
unique(ary) {
var i = 0,
gid = "_" + +new Date() + Math.random(),
objs = [],
hash = {
string: {},
boolean: {},
number: {},
},
p,
l = ary.length,
ret = [];
for (; i < l; i++) {
p = ary[i];
if (p == null) continue;
tp = typeof p;
if (tp in hash) {
if (!(p in hash[tp])) {
hash[tp][p] = 1;
ret.push(p);
}
} else {
if (p[gid]) continue;
p[gid] = 1;
objs.push(p);
ret.push(p);
}
}
for (i = 0, l = objs.length; i < l; i++) {
p = objs[i];
p[gid] = undefined;
delete p[gid];
}
return ret;
},
quchongClick() {
list = this.trem;
arr = list.split("\n");
arr = this.unique(arr);
list = "";
for (key in arr) {
list += arr[key] + "\n";
}
this.quchongtext = list;
this.$message({
message: "去重成功",
type: "success",
});
},
extractString(str) {
if (/^[a-zA-Z_)]/.test(str)) {
let regex2 = /^[a-zA-Z_][a-zA-Z0-9_]*/;
let match2 = str.match(regex2);
if (match2 && match2.length > 0) {
return match2[0];
} else {
return null;
}
}
let regex = /[^\D]+[^a-zA-Z0-9_]+([a-zA-Z0-9_]+)/;
let match = str.match(regex);
if (match && match.length > 1) {
let extractedStr = match[1];
return extractedStr;
} else {
return null;
}
},
process() {
let list = this.textarea;
let arr = list.split("\n");
let text = "";
for (key in arr) {
if (Number(key) + 1 == arr.length && this.extractString(arr[key])) {
text += this.extractString(arr[key]);
} else if (this.extractString(arr[key])) {
text += this.extractString(arr[key]) + "\n";
}
}
this.trem = text;
this.$message({
message: "解析成功",
type: "success",
});
},
},
});
</script>
</html>
https://download.csdn.net/download/qq_43027559/87707462
下载双击index.html就能开到效果。
1622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
