语法荧光笔未检测到新行答案

【问题标题】：syntax highlighter doesn't detect new line语法荧光笔未检测到新行
【发布时间】：2016-07-13 09:27:31
【问题描述】：

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

http://www.jqueryscript.net/text/jQuery-Based-Text-Highlighter-For-Textarea.html

$('textarea').textareaHighlighter({
  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
    }
  ]
});

颜色出现了，但不是在好的地方，它没有检测到行尾。

当我激活调试模式时：

$('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'
        }
    ]
});

我得到这个结果：

这是一个演示 https://jsfiddle.net/9at1jgfv/1/

【问题讨论】：

你能展示现场演示吗？ jsfiddle ?
@FastSnail: 好的 :)
@FastSnail：我用链接演示更新帖子
它没有突出显示您输入的内容，因为它需要您输入的字符串，然后再次插入突出显示范围。您可以在 jsfiddle 中清楚地看到这种情况。我的建议是隐藏当前文本，然后在另一个区域显示这将否定您遇到的问题的更改。
还是一样，文字还在，只是透明而已。

标签： javascript jquery syntax-highlighting

【解决方案1】：

终于在网站源码中搜索了一个小时： http://www.jqueryscript.net/demo/jQuery-Based-Text-Highlighter-For-Textarea/

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

    .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>

我希望这对将来的某人有所帮助。

【讨论】：