js获取页面上被选中的文字

153 阅读2分钟

参考:www.cnblogs.com/ArthurPatte…

<html>

	<head>
		<title>Get selected text with JavaScript</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style type="text/css">
			.contenttext {
				width: 500px;
				margin: 0 auto;
			}
			
			h2 {
				width: 100%;
				text-align: center;
			}
		</style>

		<script src=""></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$(".contenttext").mouseup(function(e) {
					var txt;
					//					var parentOffset = jQuery(this).offset();
					//					var x = e.pageX - parentOffset.left;
					//					var y = e.pageY - parentOffset.top;
					txt = window.getSelection();
					if(txt.toString().length > 1) {
						console.log(txt);
						console.log($(".contenttext").html());
						var str = $(".contenttext").html().replace(txt, '<span style="color:red">' + txt + '</span>');
						$(".contenttext").html(str)
					}
				});
			});
		</script>

	</head>

	<body>

		<h2>请用鼠标选中一段文字</h2>
		<div class="contenttext">
			和客户端的 JavaScript 不同的是,PHP 代码是运行在服务端的。如果您在您的服务器上建立了如上例类似的代码,则在运行该脚本后,客户端就能接收到其结果,但他们无法得知其背后的代码是如何运作的。您甚至可以将 WEB 服务器设置成让 PHP 来处理所有的 HTML 文件,这么一来,用户就无法得知服务端到底做了什么。 使用 PHP 的一大好处是它对于初学者来说及其的简单,同时也给专业的程序员提供了各种高级的特性。当您看到 PHP 长长的特性列表时,请不要害怕。您可以很快的入门,只需几个小时您就可以自己写一些简单的脚本。
		</div>

	</body>

</html>
//适用于火狐  window.getSelection()
obj.setSelectionRange(开始序号, 结束序号);  
obj.focus(); 
//适用于IE 

document.selection.createRange()
moveStart('character',2); collapse(true)
select()

var range = obj.createTextRange();  
range.moveStart("character", 开始序号);  
range.moveEnd("character", 结束序号);  
range.select(); 
//插入文本
var insertText = function(obj,str) {
                    if(document.selection){
                        var sel = document.selection.createRange();
                        sel.text = str;
                    }else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
                        var startPos = obj.selectionStart,
                        endPos = obj.selectionEnd,
                        cursorPos = startPos,
                        tmpStr = obj.value;
                        obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
                        cursorPos += str.length;
                        obj.selectionStart = obj.selectionEnd = cursorPos;
                    } else {
                        obj.value += str;
                    }
                };

//另一个例子
function setSelectText(el,start,end){
    if(el.createTextRange){
        var Range=el.createTextRange();
        Range.collapse();
        Range.moveEnd('character',end);
        Range.moveStart('character',start);
        Range.select();
    }
if(el.setSelectionRange){
        el.focus(); 
        el.setSelectionRange(start,end);  //设光标
    }