javascript - 文本解析然后在javascript中的textarea中突出显示

Question

有没有一种巧妙的方法可以在打字时动态突出显示文本区域中的文本？

我基本上会输入:

This is a [[note]] to do on friday.

在文本区域上，然后使用 a highlighting library ，我会这样调用它:

    function FindAllNotes() {
        var note = /^(?:\[{2}(?!\[+))(.+)(?:\]{2}(?!\[+))$/g
        , input = ($(#textarea).val()).match(note);
           $(#textarea).highlightWithinTextarea({
            highlight: [input],
            className: 'yellow'
          });

    }
    $(#textarea).on('keyup', function () {
        FindAllNotes();
    });

但问题是，每次我输入时，它都会工作并突出显示 [[ ]] 中包含的注释，然后我就会失去文本区域上的光标/焦点。

Answer 1

您链接到的插件可以按照您的需要处理正则表达式(尽管您应该从中删除 ^ 和 $，以免尝试匹配整个字符串)。

$(function(){
  $('.example').highlightWithinTextarea({
    highlight: /(?:\[{2}(?!\[+))(.+)(?:\]{2}(?!\[+))/g,
    className: 'highlight'
  });
});

.example{
  width:500px;
  height:250px;
}

.highlight{
  background-color:tomato;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://lonekorean.github.io/highlight-within-textarea/jquery.highlight-within-textarea.js"></script>
<link rel="stylesheet" href="http://lonekorean.github.io/highlight-within-textarea/jquery.highlight-within-textarea.css">

<textarea class="example">This is a [[note]] to do on friday.</textarea>

<小时/>

请记住，您需要包含插件中的 css 文件，该文件将 textarea 与 div 文本包装/对齐