Question

我知道，这可能会非常复杂，也许几乎不可能，但也许你们中的某个人知道：

我正在编写一个自编，简单易用的语言编辑器（5个关键词，WUHA！），它已经很好用了。但这不是重点，现在我想用语法高亮创建一个编辑器。是的，如果可能，我想在线，所以我唯一的机会是JavaScript / jQuery。

我还没有太多代码，这是我到目前为止所做的全部内容：

<!DOCTYPE html>
    <html>
    <head>
    <title>Kevcode Editor</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
    <script>
    $(document).ready(function(){
        var keywords = ["KEYWORD2", "KEYWORD3", "KEYWORD4"];

        $("#editor").keydown(function(e) {
            if(e.keyCode == 13) {
               //GET THE LINE HERE
               //mark keywords here
            }
        });

    });
</script>
</head>
<body style="background-color: grey;">
<label for="editor"><textarea id="editor" style="width: 1200px; height: 800px;"></textarea></label>
</body>
</html>

所以我的计划是创建一个textarea，如果我按Enter键（由键码13表示），运行一个脚本，检查每一行并重新生成关键字。但后来我认为检查整个脚本会浪费大量资源。当然，使用5个关键字的脚本不会太长，但如果我添加的越来越多，检查整个代码会很糟糕。所以我认为只是检查我改变了什么的当前行会为我节省很多时间。但是我怎么能实现这样的逻辑呢？如何告诉jQuery光标当前在哪一行？

很抱歉，如果我解释了一些不清楚的问题，如果您有任何疑问，请询问，我会尽可能多地提供信息。

哦，请不要给我完整的解决方案。我这样做是出于培训目的。

Answer 1

这将帮助您在textarea中找到光标位置。

的javascript：

var cursorPosition = $('#myTextarea').prop("selectionStart");

HTML：

<textarea id="myTextarea" rows="40" cols="50"></textarea>

Answer 2

试试这个：

<textarea onkeyup="getLineNumber(this, document.getElementById('lineNo'));" onmouseup="this.onkeyup();"></textarea>
<div id="lineNo"></div>

<script>

function getLineNumber(textarea, indicator) {

    indicator.innerHTML = textarea.value.substr(0, textarea.selectionStart).split("\n").length;
}

</script>

如何检测光标在哪一行？

2 个答案: