基于 GET 在 textarea 中定位文本字符串并将光标移动到该文本答案

【问题标题】：locate text string in textarea based on GET and move cursor to that text基于 GET 在 textarea 中定位文本字符串并将光标移动到该文本
【发布时间】：2013-01-23 18:57:34
【问题描述】：

我表单中的文本区域 id="Fulltext" 由数据库提供，其中包含一本书的许多章节。当用户单击文本区域上方的链接时，
<a href="samePage.php?chap=Chapter 5" id="Chapter 5">Chapter 5</a>，我希望光标在文本区域内移动并将其自身定位在文本“第 5 章”的前面。这可能吗？

【问题讨论】：

有可能。在不相关的注释中，id 不能有空格。
你是对的，因为我使用 GET 来识别我正在寻找的文本，所以我不需要 id；我使用了一个哈希，但是这个页面从 iframe 中的页面中提取了额外的信息，它需要有实际的链接。

标签： jquery

【解决方案1】：

演示：http://jsfiddle.net/deg6j/

HTML

<html>
<head>
    <script type="text/javascript">
        function selectText(text)
        {
            var textArea = $('#Fulltext');
            var index = textArea.text().search(text);
            textArea.caretTo(index);      
        }
    </script>
</head>
<body>
<textarea id='Fulltext' rows=10>
    Chapter 1
    This is a lot of text...

    Chapter 2
    More more more

    Chapter 3
    More dsa less
</textarea>
    <a href="#" onclick="selectText('Chapter 2')">Chapter 2</a>
</body>
</html>

Javascript

new function($) {
  // Behind the scenes method deals with browser
    // idiosyncrasies and such
    $.caretTo = function (el, index) {
        if (el.createTextRange) { 
            var range = el.createTextRange(); 
            range.move("character", index); 
            range.select(); 
        } else if (el.selectionStart != null) { 
            el.focus(); 
            el.setSelectionRange(index, index); 
        }
    };

    // The following methods are queued under fx for more
    // flexibility when combining with $.fn.delay() and
    // jQuery effects.

    // Set caret to a particular index
    $.fn.caretTo = function (index, offset) {
        return this.queue(function (next) {
            if (isNaN(index)) {
                var i = $(this).val().indexOf(index);

                if (offset === true) {
                    i += index.length;
                } else if (offset) {
                    i += offset;
                }

                $.caretTo(this, i);
            } else {
                $.caretTo(this, index);
            }

            next();
        });
    };
}(jQuery);

【讨论】：

哇，看起来不错。让我确定一下范围，稍后再回复您。谢谢。
绝对，所以你知道javascript部分在一个document.ready中的jquery中。
你的小提琴效果很好。我会调整并更多地应用它。感谢您的帮助！
谢谢。显然我是 jquery 的新手。

【解决方案2】：

我猜你可以。

假设您可以通过文本识别章节开始的位置，您可以使用jQuery caret plugin 来识别。

检查this 和this 问题的答案。

另外，您可能希望在章节锚点中绑定一个 javascript 函数。

【讨论】：

感谢您的来信。我见过一个，但没有见过另一个。感谢您的想法。