js实现鼠标选中文本改变选中区域颜色以及给选中区域加上html标签
这个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="replace">replace selection</button> -->
<script>
(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 = '<span style="color:red;">' + nodeText.substring(startOffset, endOffset) + "</span>";
var suffix = nodeText.substring(endOffset, nodeText.length);
$(event.currentTarget)[0].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{
//多个span合并
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].textContent
childNodes[idx].replaceWith("")
}
}
}
}
}
}
});
}());
</script>
</body>
</html>
第二个：
<!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{
//多个span合并
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].textContent
childNodes[idx].replaceWith("")
}
}
}
}
}
});
}());
</script>
</body>
</html>
