如何查看文本区域内的结束行字符？

Question

我正在创建一个简单的在线文本编辑器，需要一个选项来显示文本区域内的结束行字符。

BR, CR, LF... 按 Enter 键入的任何内容 - 我需要可见。

可能吗？

谢谢。

$('button').on('click', function(){
  // show-hide end lines;
});

.tx{
display:block;
width: 100%;
resize:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<textarea class='tx' rows = 9>
lorem ipsum
lorem ipsum
lorem ipsum


</textarea>
<button>CLICK</button>

Answer 1

试试这个代码片段，这里我们用新行字符替换 \n。

$('button').on('click', function(){
  $('.tx').val(v.replace(/\n/g, '↵\n')) // show end lines char;
});

$('button').on('click', function(){
    $('.tx').val(v.replace(/↵\n/g, '\n')) // hide end lines char;
});

Answer 2

请看这是您需要的吗？

$('#toggle').on('click', function() {
  var txt = $('textarea').val();
  if ($('textarea').attr('data-linebreak') == 'off') {
    txt = txt.replace(/\n/g, '↵\n');
    $('textarea').attr('data-linebreak', 'on');
  } else {
    txt = txt.replace(/↵\n/g, '\n');
    $('textarea').attr('data-linebreak', 'off');
  }
  $('textarea').val(txt);
});

textarea {
  width: 300px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea data-linebreak="off"></textarea>
<br>
<input type="button" value="Toggle" id="toggle">

如何查看文本区域内的结束行字符？

how to see end lines characters inside a textarea?

html

javascript

textarea