Question

当我从换行开始并从该行的开头开始＃标签时，荧光笔正在将颜色应用到上一行。

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

Answer 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来演示。希望这可以帮助！如果您有任何问题，请告诉我。

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

1 个答案: