public
Created

Convert DOM element words into click-able list of spans

  • Download Gist
click_words.html
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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.