这个demo是看了dialog flow 的intent模块下面的Training phrases 得到的心得，实现的一个简单的选中区域实现的效果，不过这里就没写选中之后会弹出数据了。直接上demo：
<!DOCTYPE html><html><head> ???<title>Field selection demo</title> ???<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><style>#trainPhase {border: 1px solid #ddd;padding: 10px;}</style></head><body><div contentEditable="true" id="trainPhase">div test body. Please input content.</div><!-- <button id="get">get selection</button> --><button id="replace">replace selection</button><script>(function() {var $elem;$(‘#trainPhase‘).focus(function(){$elem = $(this);});// $(‘#get‘).on(‘click‘, function() {// alert($elem.fieldSelection().text);// window.console && console.log($elem.fieldSelection());// });$(‘#replace‘).on(‘click‘, function() {var selection_text = window.getSelection().toString();var childNodes = document.getElementById("trainPhase").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 = ‘<span style="color:red;">‘ + nodeText.substring(startOffset, endOffset) + "</span>";var suffix = nodeText.substring(endOffset, nodeText.length);document.getElementById("trainPhase").innerHTML = prefix + middle + suffix;}if (childNodes.length > 1){if(range.startContainer == range.endContainer){for(var idx in childNodes){if (childNodes[idx] == range.startContainer ||childNodes[idx] == range.startContainer.parentNode){var nodeText = childNodes[idx].textContent;var prefix = nodeText.substring(0, startOffset);var middle = ‘<span style="color:red;">‘ + nodeText.substring(startOffset, endOffset) + "</span>";var suffix = nodeText.substring(endOffset, nodeText.length);$(childNodes[idx]).replaceWith( prefix + middle + suffix);}}}else{var isStart = false;var repalce_span = ""for(var idx in childNodes){if (childNodes[idx] == range.startContainer || ????childNodes[idx] == range.startContainer.parentNode){isStart = true;var nodeText = childNodes[idx].textContent;var prefix = nodeText.substring(0, startOffset);var suffix = ‘<span style="color:red;">‘ + nodeText.substring(startOffset, nodeText.length);repalce_span = ?prefix + suffix;childNodes[idx].replaceWith("")}else if(childNodes[idx] == range.endContainer ||childNodes[idx] == range.endContainer.parentNode){isStart = false;var nodeText = childNodes[idx].textContent;var prefix = nodeText.substring(0, endOffset) + "</span>";var suffix = nodeText.substring(endOffset, nodeText.length);repalce_span += prefix + suffix$(childNodes[idx]).replaceWith(repalce_span);break;}else{if(isStart){repalce_span += childNodes[idx].textContentchildNodes[idx].replaceWith("")}}}}}});}());</script></body></html>
js实现鼠标选中文本改变选中区域颜色以及给选中区域加上html标签
原文地址：https://www.cnblogs.com/bertha-zm/p/9208257.html