js實現鼠標選中文本改變選中區域顏色以及給選中區域加上html標籤

時間 2019-11-16

標籤實現鼠標選中文本改變區域顏色以及加上 html 標籤欄目 JavaScript 简体版

原文原文鏈接

這個demo是看了dialog flow 的intent模塊下面的Training phrases 獲得的心得，實現的一個簡單的選中區域實現的效果，不過這裏就沒寫選中以後會彈出數據了。直接上demo：javascript

第一個：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="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>

　　第二個：java

<!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>