Textarea主题标签突出显示在第一行之后应用到错误的位置[关闭]答案

【问题标题】：Textarea hashtag highlight is applied to the wrong position after the first line [closed]Textarea主题标签突出显示在第一行之后应用到错误的位置[关闭]
【发布时间】：2015-10-27 14:46:41
【问题描述】：

当我要换行并从该行的开头开始标签时，荧光笔会将颜色应用于前一行。

  <style>
        #input{
            color: transparent;
        }
        #input b{
            text-decoration: none;
            color: transparent;
            background-color: #9aceff;
            font-weight: normal;
        }
        #t{
          background-color: transparent;            
        }
    </style>

<textarea id="t" style="width: 342px; height: 92px; resize: none; position: absolute; z-index: 1; border: 1px solid #212;font-family: arial; padding: 20px; margin: 0; font-size: 12px;">
</textarea>
<div style="width: 300px; height: 50px; border: 1px solid #212; font-family: arial; padding: 20px; position: absolute; z-index: 0; margin: 0; font-size: 12px;" id="input">

</div>

<script>
$(document).ready(function(){
   $('#t').on('input keyup', function() {
       var str = $(this).val();       
       str = str.replace(/(<.+?>)/gi, '');        
       str = str.replace(/(?:\s|^)#([^0-9\W\s][a-zA-z0-9]*)/g, ' <b>#$1</b>');       
       str = str.replace(/(?:\r\n|\n\r|\r|\n)/g, '<br />');       
       $('#input').html(str);
   });
});
</script>

这是我的 jsfiddle code。

【问题讨论】：

问题可能出在您的正则表达式上。为了清楚起见，我已将标签添加到问题中并编辑了问题。
是的，我知道，但我想不通，感谢您的完美编辑。

标签： javascript regex

【解决方案1】：

您在这里面临的问题是您的正则表达式在用<br /> 元素最终替换换行符之前用空格替换换行符。

因此，如果您的散列字符串前面有换行符，突出显示将出现在前一行，而不是正确放置在与散列字符串相同的行上。

对此的快速解决方法是交换最后两个字符串替换，并在 <br /> 之后添加一个空格以避免它包含在散列字符串中：

$(document).ready(function(){
   $('#t').on('input keyup', function() {
       var str = $(this).val();       
       str = str.replace(/(<.+?>)/gi, '');
       str = str.replace(/(?:\r\n|\n\r|\r|\n)/g, '<br /> ');
       str = str.replace(/(?:\s|^)#([^0-9\W\s][a-zA-z0-9]*)/g, ' <b>#$1</b>');       
       $('#input').html(str);
   });
});

这里有一个updated JSFiddle 来演示。希望这可以帮助！如果您有任何问题，请告诉我。

【讨论】：

是的，这有帮助。谢谢。 :)
太棒了！很高兴能为您提供帮助。