xeoncross/click_words.html

## click_words.html
<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>
	<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>