Javascript 语法荧光灯不'；检测不到新线

我正在使用此插件突出显示文本区域：

颜色会出现，但不在好的位置，它不会检测到行尾

当我激活调试模式时：

$('textarea').textareaHighlighter({
    debug: true,
    matches: [
         {
      'match': ['hello','dear','this is a test', 'text to match'], // will check for this matches
      'matchClass': 'match'             // on matched text this class will be added
    },
        {
            'match': /([\%'])(?:(?=(\\?))\2.)*?\1/g,
            'matchClass': 'tags'
        }
    ]
});

我得到这个结果：

这里是一个演示

---

最后，在网站上搜索一小时后，来源：

我通过添加一个类找到了解决方案：

    .target {
        overflow: hidden;
        border: 1px solid #ddd;
        border-radius: 3px;
        resize: none;
        white-space: pre-wrap;      <----------------- the magic solution
        background-color: #f9f9f9;
        -webkit-appearance: none;
    }


<textarea class="target" name="message" required="true" style="width:600px; height:470px;">  hello,

  I'm using this is a test.

  thank you dear
</textarea>

.target{
溢出：隐藏；
边框：1px实心#ddd；
边界半径：3px；
调整大小：无；
空白处：预包装；你能展示现场演示吗| jsfiddle？@FastSnail:okey:）@FastSnail:我用一个链接demo更新帖子。它不会突出显示你输入的内容，因为它会获取你输入的内容的字符串，然后再次插入突出显示跨距。你可以在你的jsfiddle中清楚地看到这一情况。我的建议是隐藏cu当前文本然后在另一个区域显示更改，这将否定您所遇到的问题。这是一样的，文本仍然存在，只是透明而已。
    .target {
        overflow: hidden;
        border: 1px solid #ddd;
        border-radius: 3px;
        resize: none;
        white-space: pre-wrap;      <----------------- the magic solution
        background-color: #f9f9f9;
        -webkit-appearance: none;
    }


<textarea class="target" name="message" required="true" style="width:600px; height:470px;">  hello,

  I'm using this is a test.

  thank you dear
</textarea>