有没有办法在 Chrome 和/或 IE 中使用 JS 选择多个文本区域？答案

【问题标题】：Is there a way selecting MULTIPLE areas of text with JS in Chrome and/or IE?有没有办法在 Chrome 和/或 IE 中使用 JS 选择多个文本区域？
【发布时间】：2011-06-26 11:55:56
【问题描述】：

Firefox 3 可以使用 JS 选择多个文本区域。有没有办法在 Chrome 和 IE 中做到这一点？

我真的试图找到一种方法来选择多个 Chrome 和 IE9 中网页中的文本区域。

信息在： http://help.dottoro.com/ljxsqnoi.php

示例在： http://jsfiddle.net/t3sWz/

仅编码 FireFox3.5+...（但这是个问题）：

<html>

<head>
    <meta charset="UTF-8">
    <style>
        #trigger { background: yellow }
    </style>
</head>

<body>
    <p id="test">
        This is some text you can highlight by dragging or clicking below.
    </p>
    <span id="trigger">
        Click here to select "This" and "some"
    </span>
    <a> - Firefox only :-(</a>
    <br>
    <br>
    <br>
    <br>
    <br>
    <input type="button" value="Get selection" onmousedown="getSelText()">
    <form name=aform>
        <textarea name="selectedtext" rows="5" cols="20">
        </textarea>
    </form>
    <script>
        var testCase = function() {
            var userSelection;

            if (window.getSelection) {
                userSelection = window.getSelection();
            } // No support for IE
            var textNode = document.getElementById('test').firstChild;
            var theRange = document.createRange();

            // select 0th–4th character
            theRange.setStart(textNode, 0);
            theRange.setEnd(textNode, 4);

            // set user selection    
            userSelection.addRange(theRange);

            var textNode = document.getElementById('test').firstChild;
            var theRange = document.createRange();

            // select 8th–12th character
            theRange.setStart(textNode, 8);
            theRange.setEnd(textNode, 12);

            // set user selection    
            userSelection.addRange(theRange);
        };

        window.onload = function() {
            var el = document.getElementById('trigger');
            el.onclick = testCase;
        };

        function getSelText() {
            var txt = '';
            if (window.getSelection) {
                txt = window.getSelection();
            } else if (document.getSelection) {
                txt = document.getSelection();
            } else if (document.selection) {
                txt = document.selection.createRange().text;
            } else
            return;
            document.aform.selectedtext.value = txt;
        }
    </script>
</body>

【问题讨论】：

为什么要这样做？我对用例感兴趣。

标签： javascript firefox range textnode textrange

【解决方案1】：

没有。在主流浏览器中，只有 Firefox 支持用户选择范围内的多个范围。其他浏览器（WebKit、Opera、IE9）确实有Selection API 来支持多个范围，但目前不支持。 WebKit 是apparently not planning to add support any time soon。至于 Opera 和 IE，我就不知道了。

【讨论】：