Javascript Textarea标签高亮显示应用于第一行后的错误位置

当我进入新行并从该行的开头开始使用标签时，highlighter会将颜色应用到前一行

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

---

这是我的JSFIDLE。

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

因此，在哈希字符串前面有换行符的情况下，高亮显示将显示在前一行，而不是与哈希字符串正确放置在同一行上

对此的一个快速修复方法是交换最后两个字符串替换，并在后面添加一个空格，以避免它包含在哈希字符串中：

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

---

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

问题可能出在您的正则表达式上。我已将标签添加到问题中，并对问题进行了编辑以使其清晰。是的，我知道，但我无法理解，感谢您的完美编辑。是的，这很有帮助。谢谢伟大的我很高兴能帮助你。

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

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