选择并读取页面上非表单元素的文本内容

继续前进，我们还可以负责并动态选择然后在页面上检索我们想要的内容，例如特定DIV的内容，而不是简单地检索用户选择的内容。 这与仅使用元素 innerHTML 或  innerText 属性来获取其内容 非常不同 ;  我们希望  通过JavaScript  实际 选择 该内容，从而打开其他可能的操作，例如将其复制到用户的剪贴板。

要选择 非 表单字段元素 的文本内容 ，我们首先创建一个新的  Range对象 并将其设置为包含所需的元素。 然后，将范围添加到 Selection 对象以实际选择它。 让我们看看它是如何工作的，这个函数根据传入元素的元素动态选择元素的文本内容：

要创建一个 用于添加范围 的 对象，我们使用 ;  因为默认情况下此方法会返回用户选择的文本（如果有的话），所以我们会 立即 调用其 方法来清除平板。 然后，我们开始创建一个空白范围，将元素的内容归零以选择使用 ，然后将该范围添加到 对象中以进行选择。 Selection  window.getSelection() removeAllRanges()   range .selectNodeContents()  Selection

一旦我们选择了我们想要阅读的文本，我们就转向我们之前的 getSelectionText() 方法来读取所选元素的内容，例如：

演示：

“我的妈妈总是说，'生活就像一盒巧克力。你永远不会知道你会得到什么。'” - Forrest

选择并检索文本

代码：

 选择和读取表单元素的内容，如INPUT文本或TEXTAREA

为了选择和读取表格相关的字段值，例如INPUT文本和TEXTAREA，该过程不同于选择常规文本。 我们大多数人已经知道选择表单字段的整个值，我们可以使用  inputElement.select()* ，并检索该值，探测  inputElement.value 。 但是，还可以通过编程方式选择字段值的一部分并获取该值。 让我们看看如何做到这一点。

- 以编程方式选择字段值的一部分

要动态选择INPUT文本或TEXTAREA元素的一部分，请使用 以指示字段中所需选择的起始和结束索引：   formElement.setSelectionRange()

请注意，第二个参数  formElement.setSelectionRange() 应该是要选择的结束字符的索引 加1 ，因此要选择表单字段的前5个字符，要输入的结束索引值应为5或4（第5个字符的索引） ）加1。

演示：

选择前5个字符     选择第5个到最后一个字符

*注意：  在iOS设备中（从iOS9开始），使用 inputElement.select() 快速选择所有表单元素的内容似乎不起作用。 但是，使用 inputElement.setSelectionRange() 的确如此。 因此，以下选择跨浏览器和设备的所有表单字段的文本：

inputElement.setSelectionRange(0, inputElement.value.length)

- 读取字段值的选定部分

无论如何选择表单字段的值的一部分，无论是通过使用 setSelectionRange() 动态选择该部分，还是用户拖动他/她的鼠标来进行用户定义的选择，检索选择的方法是获取指数选择的开始和结束字符，然后使用它们从表单字段的值中提取该部分。 我们可以使用以下方法获取活动选择的索引：

• formElement.selectionStart ：所选文本的第一个字符的索引。 如果未选择任何文本，则它包含输入光标后面的字符的索引。
• formElement.selectionEnd ：所选文本的最后一个字符的索引。 如果未选择任何文本，则它包含输入光标后面的字符的索引。

上述属性在从表单字段中获取任何用户选定文本时特别有用，其中选择的索引尚不为人所知。 以下演示回应了用户使用以下属性从TEXTAREA中选择的内容：

演示（在textarea中选择一些文本）：

输出：

代码：

我们 mouseup 在目标TEXTAREA上 附加一个“  ”事件，以便在用户将鼠标放入其中时进行监听。 在事件处理函数内部，为了检测用户选择的内容，首先，我们检查TEXTAREA  selectionStart  和 selectionEnd 属性 是否 包含不同的值 - 如果它们相同，则表示没有选择任何内容，在这种情况下它们都指向输入光标后面的字符。 如果它们的值不同，我们继续将所选文本的索引映射到表单字段值的值，以使用派生实际选定的文本  formElement.value.substring() 。