text-annotator
Version:
A JavaScript library for locating and annotating plain text in HTML
88 lines (78 loc) • 4.44 kB
HTML
<html>
<head>
<script src="js/text-annotator.min.js"></script>
</head>
<body>
<h2>Displayed content:</h2>
<p id="content">"I am <b><i>Zhan Huang</i></b>, a <b>frontend developer</b> in EMBL-EBI. I like <b>food</b> and <b>sports</b>. My favourite food is <b>udon noodles</b> and my favourite sports are <b>badminton</b> and <b>football</b>. Let us be friends!" - Zhan Huang</p>
<h2>HTML string:</h2>
<p>"I am <b><i>Zhan Huang</i></b>, a <b>frontend developer</b> in EMBL-EBI. I like <b>food</b> and <b>sports</b>. My favourite food is <b>udon&nbsp;noodles</b> and my favourite sports are <b>badminton</b> and <b>football</b>. Let us be friends!" - Zhan Huang</p>
<h2>Logs:</h2>
<ul id="logs"></ul>
<script>
var annotator = new TextAnnotator({content: document.getElementById('content').innerHTML})
// highlighted by direct search
var str = 'I'
var highlightIndex = annotator.search(str)
if (highlightIndex !== -1) {
document.getElementById('content').innerHTML = annotator.highlight(highlightIndex)
document.getElementById('logs').innerHTML += '<li>"' + str + '" is highlighted by direct search.</li>'
}
// highlighted by direct search all
var str = 'Zhan Huang'
var highlightIndexes = annotator.searchAll(str)
if (highlightIndexes.length) {
document.getElementById('content').innerHTML = annotator.highlightAll(highlightIndexes)
document.getElementById('logs').innerHTML += '<li>"' + str + '" is highlighted by direct search all.</li>'
}
// highlighted by token-based fuzzy search
var str = 'frontend developer'
var prefix = 'a '
var postfix = ' in EMBLEBI'
highlightIndex = annotator.search(str, {prefix: prefix, postfix: postfix, fuzzySearchOptions: {}})
if (highlightIndex !== -1) {
document.getElementById('content').innerHTML = annotator.highlight(highlightIndex)
document.getElementById('logs').innerHTML += '<li>"' + str + '" with prefix "' + prefix + '" and postfix "' + postfix + '" is highlighted by token-based fuzzy search.</li>'
}
// highlighted by sentence-based fuzzy search
var str = 'I like fool and sport'
highlightIndex = annotator.search(str, {fuzzySearchOptions: {}})
if (highlightIndex !== -1) {
document.getElementById('content').innerHTML = annotator.highlight(highlightIndex)
document.getElementById('logs').innerHTML += '<li>"' + str + '" is highlighted by sentence-based fuzzy search.</li>'
}
// highlighted by eager search
var str = 'udon noodles'
highlightIndex = annotator.search(str, {eagerSearchOptions: {containerId: 'content'}})
if (highlightIndex !== -1) {
document.getElementById('content').innerHTML = annotator.highlight(highlightIndex)
document.getElementById('logs').innerHTML += '<li>"' + str + '" is highlighted by eager search.</li>'
}
// return the highlight content first and then update dom
var str = 'badminton'
highlightIndex = annotator.search(str)
if (highlightIndex !== -1) {
document.getElementById('content').innerHTML = annotator.highlight(highlightIndex).content
document.getElementById('logs').innerHTML += '<li>"' + str + '" is highlighted by returning the new content.</li>'
}
// combine search and highlight
var str = 'football'
var result = annotator.searchAndHighlight(str)
document.getElementById('content').innerHTML = result.content
document.getElementById('logs').innerHTML += '<li>"' + str + '" is highlighted by searchAndHighlight.</li>'
var str = 'friends'
document.getElementById('content').innerHTML = annotator.searchAndHighlight(str).content
// remove the last highlight in 2 seconds
setTimeout(function() {
document.getElementById('content').innerHTML = annotator.unhighlight(result.highlightIndex)
document.getElementById('logs').innerHTML += '<li>"' + str + '" was unhighlighted.</li>'
}, 2000)
document.getElementById('content').innerHTML = annotator.searchAndHighlight('favourite', {searchOptions: {prefix: 'my ', postfix: ' sports'}}).content
</script>
<style>
.highlight {
background-color: rgba(248, 231, 28, 0.4);
}
</style>
</body>
</html>