html鼠标选择文字颜色,js实现鼠标选中文本改变选中区域颜色以及给选中区域加上html标签...

这个demo是看了dialog flow 的intent模块下面的Training phrases 得到的心得，实现的一个简单的选中区域实现的效果，不过这里就没写选中之后会弹出数据了。直接上demo：

第一个：

Field selection demo

#trainPhase {

border: 1px solid #ddd;

padding: 10px;

}

div test body. Please input content.

(function() {

$('#trainPhase').on('mouseup', function(event) {

var selection_text = window.getSelection().toString();

if(selection_text) {

var childNodes = $(event.currentTarget)[0].childNodes;

var range = window.getSelection().getRangeAt(0);

var startOffset = range.startOffset;

var endOffset = range.endOffset;

if (childNodes.length == 1){

var nodeText = childNodes[0].textContent.trim();

var prefix = nodeText.substring(0, startOffset);

var middle = '' + nodeText.substring(startOffset, endOffset) + "";

var suffix = nodeText.substring(endOffset, nodeText.length);

$(event.currentTarget)[0].innerHTML = prefix + middle + suffix;

}

if (childNodes.length > 1){

if(range.startContainer == range.endContainer){