JS document.selection.createRange方法

最新推荐文章于 2024-08-02 18:22:43 发布
最新推荐文章于 2024-08-02 18:22:43 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： JavaScript 文章标签： button javascript input character html function

document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。

配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。

 

 

实例一：

<textarea cols=50 rows=15>

哈哈。我们都是新生来得。大家都来相互帮助呀。这样我们才能进步，我们才能赚大钱！</textarea>

<input type=button value=选择字后点击我看看 οnclick=alert(document.selection.createRange().text)>

</form>

 

 

实例二：

<body>

<textarea name="textfield" cols="50" rows="6">就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字

哪位老大能解决的呀?请多多帮忙!!!谢谢

</textarea>

<input type="button" value="showSelection" οnclick="alert(document.selection.createRange().text)">

<input type="button" value="showclear" οnclick="alert(document.selection.clear().text)">

<input type="button" value="showtype" οnclick="alert(document.selection.type)">

<textarea name="textfield" cols="50" rows="6" οnselect="alert(document.selection.createRange().text)">就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字

哪位老大能解决的呀?请多多帮忙!!!谢谢

</textarea>

</body>

 

 

实例三：选中Input中的文本

 

<SCRIPT LANGUAGE="JavaScript">

<!--

function test2()

{

var t=document.getElementById("test")

var o=t.createTextRange()

alert(o.text)

o.moveStart("character",2)

alert(o.text)

o.select()

}

//-->

</SCRIPT>

<input type='text' id='test' name='test'><input type=button οnclick='test2()' value='test' name='test3'>

对textarea中的内容，进行选中后，加效果

<script language="JavaScript">

<!--

function bold(){

Qr=document.selection.createRange().text;

if(!Qr || document.selection.createRange().parentElement().name!='description')

{

txt=prompt('Text to be made BOLD.','');

if(txt!=null && txt!='') document.form1.description.value+=''+txt+'';

}

else{

document.selection.createRange().text=''+document.selection.createRange().text+'';

document.selection.empty();

}

}

//-->

</script>

<input type="button" value="加粗" οnclick="bold();" />

<textarea name="description" style="width: 436px; height: 296px">选中我，点击加粗</textarea>

 

 

实例四：javascript捕获到选中的网页中的纯文本内容

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>鼠标取词</title>

<script>

function getSel()

{

var t=window.getSelection?window.getSelection():(document.getSelection?document.getSelection():(document.selection?document.selection.createRange().text:""))

document.forms[0].selectedtext.value = t;

}

</script></head>

<body οnmοuseup="getSel()">

<form>

<textarea name="selectedtext" rows="5" cols="50"></textarea>

</form>

以上的代码可以捕获到选中的网页中的纯文本内容(不含HTML标签)

如果想获得包含html的内容，将document.selection.createRange().text改成document.selection.createRange().htmlText

</body>

</html>

JS 处理文档选择和范围创建【createRange | getSelection】
mx_csdn的博客
11-09 1492
JS在光标、文本选择方面的应用
document.execCommand(‘copy‘) 复制微信号或其他文本
idweiwei的博客
09-20 549
照例直接上使用代码 HTML <!-- 复制目标 --> <span id="copyDom" class="wx_hm" style="display: none">VikF1997</span> <!-- 事件dom --> <b oncopy="myFunction2()">点我复制</span> JS /* 长按复制代码 */ function copyArticle(event) {
document.selection.createRange方法与实例
12-11
配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。 哈哈。我们都是新生来得。大家都来相互帮助呀。这样我们才能进步，我们才能赚大钱！ [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]这个不错   就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字 哪位老大能解决的呀?请多多帮忙!!!谢谢 就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字 哪位老大能解决的呀?请多多帮
document.selection.createRange方法
热门推荐
rfb0204421的专栏
04-01 1万+
document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。 实例一：哈哈。我们都是新生来得。大家都来相互帮助呀。这样我们才能进步，我们才能赚大钱！   实例
document.selection.createRange()
weixin_30492047的博客
01-30 197
document.selection.createRange() 2009-12-25 14:07:35|分类：Technical|字号订阅 最近看突然看到相关内容，准备收集一下跨浏览器的相关操作。 设置选中的状态。 functionSelectRange(obj,begin,end) { if(obj.cre...
javascript获取选中的文本的方法代码.docx
01-18
// 对于IE浏览器，使用document.selection和createRange方法 // 对于现代浏览器（如Firefox、Chrome等），使用window.getSelection() var selectText = (document.selection && document.selection.createRange) ...
Javascript selection的兼容性写法介绍
10-26
document.selection对象通过createRange()方法来获取选中的文本范围，然后通过text属性获取选中文本的字符串。随着IE逐渐向标准靠拢，document.selection对象的支持也逐渐被弃用，但在一些老旧的IE版本中仍有使用。 ...
DHTML之-----document.selection 的 createRange
本本技术
12-07 310
一、document.selection 介绍 document.selection 表示当前网页中的选中内容。 方法有： clear　清除选中的内容 empty　取消选中 createRange　返回 TextRange 或 ControlRange 对象 createRangeCollection 不支持 属性有：   type　选中内容的类型 ty...
DOM-document.selection.createRange方法和TextRange对象
Ned_mahone的博客
04-07 3800
转自：http://blog.163.com/ruby_study/blog/static/238680065201611303416839/IE提供了Selection对象和TextRange对象用于实现对被选择内容进行修改以及在指定区域中进行查找。注：此对象应用于IE9版本以下，对于IE10及IE11，分别使用document.getSelection和window.getSelection来...
document.selection 的 createRange()方法汇总
DaiDaiLiu的专栏
01-24 3116
document.selection 的 createRange INPUT{border: 1 solid #000000} BODY,TABLE{font-size: 10pt} 实例一
document中Selection、Range的介绍
08-26 648
Selection对象：      代表窗口或窗格中的当前所选内容。所选内容代表文档中选定（或突出显示）的区域，如果文档中没有选定任何内容，则代表插入点。每个文档窗格只能有一个 Selection 对象，并且在整个应用程序中只能有一个活动的 Selection 对象。 Text 属性是 Selection 对象的默认属性。使用此属性可设置或返回当前所选内容中的文本。 由于 Range 对象与
JAVAScript document.selection.createRange方法
叶孤城
09-27 224
document.selection.createRange() 方法根据当前选择文字返回 TextRange 对象，或根据选择控件返回 ControlRange 对象。 配合 execCommand，在 HTML 编辑器中可以完成很多事情，比如文字加粗、斜体、复制、粘贴、创建超链接等。   实例一： &lt;textarea cols=50 rows=15&gt; 测试内容！&lt...
javascript用createRange拷贝Range片段到粘贴板
qq_36391954的博客
06-16 2344
最近项目需要做一个编辑器，其中有个按钮点击可以将编辑好的文章一键复制到粘贴板，产品的要求是复制好的文章能连带图片和样式一起粘贴到word中。本来打算用clipboard.js来做的，但发现它只能复制文本。在谷歌之后，有了新的方案：利用Range对象选择需要复制的范围，然后将选好的范围复制下来。我用layui的define方法封装了一个对象layui.define(['jquery','layer'...
JavaScript CreateRange()操作集锦-JavaScript操作实现上标,下标功能
10-11 4200
JavaScript操作实现上标，下标功能  function TestDivText(divname,SupSub){ //divText=document.selection.createRange().htmlText;//文本 divText=document.selection.createRange().htmlText;//Html文本// alert(divText); if(
document.selection.createRange
天使的天空
05-19 2131
最近在做编辑器，需要对编辑器研究下，发现document.selection.createRange这个挺有用的。document.selection.createRange方法：document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。配合 exec
JavaScript 的 Range 和 DocumentFragment
Korbin的博客
08-02 1475
Range对象表示文档中节点和文本节点的一部分。它允许你创建、操作和检测文档中的任意部分。文档：https://developer.mozilla.org/en-US/docs/Web/API/Range。
selection.addRange(range)
最新发布
04-09
### 使用 `selection.addRange` 方法 在浏览器的 DOM API 中，`Selection` 对象表示用户当前所选的内容区域。通过该对象可以操作文档中的文本选择范围。其中，`addRange` 是 `Selection` 的方法之一，用于向现有的选择中添加一个新的 `Range` 或 `StaticRange`。 以下是关于如何使用 `selection.addRange` 方法的具体说明： #### 基本语法 ```javascript selection.addRange(range); ``` - 参数 `range` 表示要添加到现有选择的一个有效的 `Range` 或 `StaticRange` 实例[^1]。 #### 浏览器兼容性注意事项 需要注意的是，在某些旧版浏览器中可能不支持此功能。现代主流浏览器如 Chrome, Firefox, Edge 和 Safari 都已实现对 `addRange` 的良好支持[^2]。 #### 示例代码 下面是一个简单的例子来展示如何创建并添加一个 Range 到 Selection: ```javascript // 获取 document 的 body 节点作为上下文 const body = document.body; // 创建新的 range 对象实例 let range = document.createRange(); // 设置 range 开始位置和结束位置 (这里假设有一个 id="example" 的元素存在) let exampleElement = document.getElementById('example'); if (exampleElement) { range.setStart(exampleElement.firstChild, 0); // 设定起始节点及偏移量 range.setEnd(exampleElement.lastChild, exampleElement.textContent.length); // 结束设定 let sel = window.getSelection(); // 得到全局的选择对象 if (!sel.rangeCount || !sel.getRangeAt(0).intersectsNode(exampleElement)) { sel.removeAllRanges(); // 清除之前所有的 ranges 如果有必要的话 sel.addRange(range); // 将新定义好的 range 加入 selection } } ``` 上述脚本首先定位了一个特定 HTML 元素内部的所有子内容作为一个可选取的区间，并将其加入用户的当前选择状态之中[^3]。 #### 关键点解释 - **document.createRange()**: 这是用来初始化一个新的 `Range` 对象的方法。 - **setStart(node, offset)** 及其对应设置终点的方法用来指定这个区间的边界在哪里。 - **window.getSelection().removeAllRanges()** 在重新定义前清除了任何现存的选择以防冲突或重复叠加效果[^4]。 #### 局限性和替代方案 尽管可以直接利用 `addRange`, 不同场景下也可能需要考虑其他方式比如直接修改 DOM 文字节点或者采用更高级别的框架工具处理复杂的交互逻辑[^5]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值