JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="enter"/>
<div id="content"></div>
<div id="link" ></div>
JavaScript
$("#enter").bind("keyup", function() {
$("#content").html($("#enter").val());
});
$.expr[":"].containsNoCase = function(el, i, m) {
var search = m[3];
if (!search) return false;
// we'll use text to find what we want...
return eval("/" + search + "/ig").test($(el).text());
};
if (!window.Kolich) {
Kolich = {};
}
Kolich.Selector = {};
Kolich.Selector.getSelected = function() {
var t = '';
if (window.getSelection) {
t = window.getSelection();
} else if (document.getSelection) {
t = document.getSelection();
} else if (document.selection) {
t = document.selection.createRange().text;
}
return t;
}
$.expr[":"].containsNoCase = function(el, i, m) {
var search = m[3];
if (!search) return false;
// we'll use text to find what we want...
return eval("/" + search + "/ig").test($(el).text());
};
Kolich.Selector.mouseup = function() {
var st = Kolich.Selector.getSelected();
if (st != '') {
// alert("You selected:\n" + st);
// wrap selecetd word in a link
$("#content:containsNoCase('" + st + "')").each(function() {
var textwithLink = '<a href="javascript:alert(\'link-to-selected-text.htm\')">' + st + '</a>';
$("#link").html(textwithLink);
});
}
}
$(document).ready(function() {
$(document).bind("mouseup", Kolich.Selector.mouseup);
});