Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Convert DOM element words into click-able list of spans

View click_words.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
<html>
<head>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 
<script type="text/javascript">
$(function(){
var text = $("#select_words").text().trim().split(" ").join("</span> <span>");
$("#select_words").html("<span>" + text + "</span>");
$("span").click(function () {
var $p = $(this).parent('div');
console.log($(this).prev().html());
console.log($(this).html());
console.log($(this).next().html());
$(this).remove();
console.log($p.text());
});
$('span').hover(function()
{
console.log($(this).html());
});
});
</script>
<style type="text/css">
span { background: #ccc; }
</style>
 
</head>
<body>
<div>
This is normal text.
</div>
<div id="select_words">
This text is selectable and click-able.
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.