Clickable Text - jQuery + PopOver

A proof of concept: 1. jQuery html injection, wrapping raw text with anchor tags. 2. PopOver wireup and configuration. Use Case: 1. System displays a text fragment. 2. User clicks specific word for definition. 3. System displays a popup. 4. -- while asynchronously loading definition from another website. (Not implemented).

by e.s. kohen

HTML

<script src="https://cdn.jsdelivr.net/xregexp/3.0.0pre/xregexp-all-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--
https://code.jquery.com/jquery-2.1.4.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css
https://xregexp.com/v/3.0.0/xregexp-min.js

-->          

Mouseover and click text below ....
<br/><br/>

<div id="FragmentText1">εἶπεν πρὸς μέ Υἰὲ ἀνθρώπου, βάδιζε καὶ εἴσελθε πρὸς τὸν Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

CSS

a.LexicalEntry {
    color: inherit;
    font-family: initial !important;
    font-size: initial !important;
    text-decoration: none;
}
a.LexicalEntry:hover {
    font-color: #337;
    background-color: #EEEE00;
    text-decoration: underline;
}

JavaScript

// ***********************************
// Popover's Outer HTML Template.
// This is the default Template, using the default CSS Classes.
var popoverTemplate = ["<div class='popover' role='tooltip'>",
    "<div class='arrow'></div>",
	"<h3 class='popover-title'></h3>",
    "<div class='popover-content'>",
    "</div>",
    "</div>"].join(""); 

// ***********************************
// *** PlaceHolder for Ajax HTML Query to retrieve definition.
function getLexicalDefinition(lexicalEntry) {
    var newTag = $("<div/>", {text : [
        lexicalEntry + ": ",
		'This is a Definition placeholder that would display a definition, or other cross references.  Definitions here can be loaded asynchronously using Ajax calls. εἶπεν πρὸς μέ Υἰὲ ἀνθρώπου, βάδιζε καὶ εἴσελθε πρὸς τὸν</span>',
     ].join('')
	});

    return newTag;

}

$(document).ready(function () {

// *** Injects HTML into raw text.
// *** Splits the content string using a whitespace regular expression.	
$('#FragmentText1').each(function() {

var txt = "hello";
  XRegExp.install('astral');
   var exp1 = XRegExp('^\\pS$', 'A');
   var exp2 = XRegExp('\\pL', 'A');
  //var exp = XRegExp("\\b(\w+)\\b", "g");
  var exp = XRegExp('\\b(?<word>\\w+)\\b', 'g');
  var exp6 = XRegExp('\\b(\\p{L}+)\\b', 'g');
  var unicodeWord = XRegExp('\\b(?<word>\\w+|\\p{L}+)\\b', 'g');
    // var txt = $this.text();
  var $this = $(this);
    	
    // var text = $this.text();
    //$this.html(
    $this.html(
            function(index, htmlString){
            //alert(htmlString);
                var result = XRegExp.replace(htmlString, exp6, 
				"<a tabindex='0' class='LexicalEntry' data-toggle='popover' role='button' title='Definition: ${0}'>${0}</a>";
                                             alert(result);
             return result;
             )
    }
   );
    
 }); // End Fragmenteach();
    
	
$(function () {
$('[data-toggle="popover"]').popover({
            
// $('a.LexicalEntry')
    
	html: true,
    title:...