console
let tags = {
"bra": "brand(品牌)",
"oth": "other(关键词)",
"tas": "taste(口味)",
"ser": "series(系列)",
"t": "type(类型)",
"gw": "good_word(物品词)",
"sce": "scent(气味)",
"pkg": "package(包装)",
"itn": "item_no(型号)",
"desc": "desc(描述词)",
"deg": "degree(度数)",
"year": "year(年)",
}
var result = {}
let hotkeys = ['1', '2', '3', '4', '5', 'q', 'w', 'r', 'e', 't', 'a', 's', 'd', 'f', 'g', 'z', 'x', 'c', 'v', 'b']
initTags(tags, hotkeys);
let listener = new window.keypress.Listener();
let i = 0;
for (let key in tags) {
let hotkey = hotkeys[i]
let buttonNode = $(`[data-name='${key}']`);
listener.simple_combo(hotkey, function() {
print(`You pressed ctrl ${hotkey}`)
buttonNode.trigger("click")
});
i++
}
let inputCorpus = $('#input-corpus').val()
let corpus = inputCorpus.split("\n")
initCorpus(corpus);
$('#input').click(()=>{
let inputCorpus = $('#input-corpus').val()
let corpus = inputCorpus.split("\n")
result = {}
initCorpus(corpus);
})
$("#output").click(()=>{
let values = []
for(let key in result) {
values.push(result[key])
}
$("#ouput-corpus").val(values.join("\n"))
})
$('.custom-tag').click(function () {
let selection = window.getSelection();
let text = selection.toString()
if (!text) return;
let btnTag = $(this).attr('data-name')
let parentNode = selection.focusNode.parentNode;
print(parentNode.tagName)
if (parentNode.tagName !== "SPAN") return ;
let span = document.createElement("i");
span.setAttribute("class", "tag");
span.setAttribute("data-tag", btnTag);
let color = $(this).attr('data-color')
span.style.cssText = `border: solid ${color} 2px;border-radius: 10px;`
selection.getRangeAt(0).surroundContents(span);
pNode = $("#"+parentNode.id)
pid = pNode.attr('id')
let html = pNode.html()
result[pid] = toCorpus(html)
tags = pNode.find("i")
});
$("#content").on('click', "button.reset", function () {
print('reset button')
let text = $(this).attr('data-text')
let id = $(this).attr('data-id')
let node = $(this).parent().parent().find("span")
print(node)
print($("#ouput-corpus"))
delete result[id]
a = node.text(text)
let content = $("#content").html();
})
function initTags(data, hotkeys){
let tags = $('#tags')
let colors = ["#26A65B", "#D24D57", "#EB7347", "#2C3E50", "#84AF9B", "#FC9D99", "#AEDD81", "#00CCFF", "#D0D0D0"]
var i = 0
for(let key in data){
let color = i < colors.length? colors[i] : colors[Math.floor((Math.random()*colors.length))]
let tmp = `
<button class='custom-tag' data-name='${key}' data-color='${color}' style="border: solid ${color} 5px;">
<i style='color: yellow'>[${hotkeys[i].toUpperCase()}]</i> ${data[key]}
</button>`
tags.append(tmp)
i++
}
}
function initCorpus(data){
let container = $('#content')
container.html("")
data.map((item, i) => {
if (! isNull(item)) {
tmp = `
<li>
<table>
<tr>
<td><button class='reset' data-id='c${i}' data-text='${item}'>reset</button></td>
<td><span id=’c${i}‘ class='corpus'>${item}</span></td>
</tr>
</table>
</li>`
container.append(tmp)
}
})
}
function print(...string){
console.log(...string)
}
function isNull( str ){
if ( str == "" ) return true;
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
}
function toCorpus(string) {
pattent = /<i .*?data-tag="(.*?)" .*?>(.*?)<\/i>/g
let r = string.replace(pattent, function(match, p1, p2){
let tmp = `${p2}/${p1}`
return '`'+ tmp + '`'
})
return r
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>NER</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdn.bootcss.com/keypress/2.1.5/keypress.min.js"></script>
</head>
<body>
<div class="main">
<h2>TAG 文本标注功能使用方法:</h2>
<h4> 1.输入待标注数据</h4>
<h4> 2.选中待标记的文本，点击tag标签即可</h4>
<h4> 3.导出标注数据</h4>
<div>
<div>
<textarea id="input-corpus" cols="100" rows="5">
确认过眼神 我遇上对的人
我策马出征 马蹄声如泪奔
青石板上的月光照进这山城
我一路的跟 你轮回声 我对你用情极深
洛阳城旁的老树根
像回忆般延伸你问
</textarea>
</div>
<button id='input' style="background-color: #26A65B; color: white">载入</button>
</div>
<div>
<div>
<textarea id="ouput-corpus" cols="100" rows="5">
</textarea>
</div>
<button id='output' style="background-color: #EB7347; color: white">输出标注</button>
</div>
<h1>CORPUS</h1>
<ol id="content" style="margin:10px;"></ol>
<div class="fixed">
<h2 style='color:white'>TAGS</h2>
<div id='tags' style="80%"></div>
</div>
<footer style="margin-bottom: 200px;"></footer>
</div>
</body>
</html>
.tag {
font-style: normal;
font-color: white;
padding: 3px;
}
.corpus {
letter-spacing: 2px;
font-size: 22px;
}
.reset {
background-color: #D24D57;
color: white;
}
ol {
list-style-type: none;
}
ol li {
position: relative;
font: bold 25px/1.5 Helvetica, Verdana, sans-serif;
margin-bottom: 1px;
}
li p {
font: 12px/1.5 Helvetica, sans-serif;
padding-left: 10px;
color: #555;
}
.fixed {
left: 0;
position: fixed;
bottom: 0;
width: 99%;
z-index: 100;
background-color: rgb(75, 86, 97);
padding: 0 50px 50px 50px;
}
.main {
padding: 75px 45px;
}
button {
background-color: #3d768a ;
margin: 5px;
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 8px;
text-shadow: 0px 1px 0px #3d768a;
font-family: Arial;
color: #ffffff;
font-size: 16px;
padding: 5px 10px 5px 10px;
text-decoration: none;
}