2输入或\ n后如何制作paragaph效果?

时间:2017-07-21 08:11:39

标签: javascript jquery html html5

如果您按照以下脚本操作,则输入1次。然后它将是一个段落。如何在2个或更多后进入?因为在代码中,有\n

$(document).ready(function() {
  $('.button').on("click", function() {
    var gogel = $('#mytxtarea').val();

    $('#posttextareadisplay').html(telol(gogel));
  });

  $('#mytxtarea').on("input propertychange", function() {
    var gogel = $('#mytxtarea').val();

    $('#posttextareadisplay').html(telol(gogel));
  });
})

function telol(str) {

  $format_search = [
    /\r\n|\r|\n|\n\r/g,
    /(.*?)\001/g,
    /\[arab\](.*?)\[\/arab\]/ig,
    /\[b\](.*?)\[\/b\]/ig,
    /\[i\](.*?)\[\/i\]/ig,
    /\[u\](.*?)\[\/u\]/ig,
    /\[\*\](.*?)(\n|\r\n?)/ig,
    /\[ul\]/ig, /\[\/ul\]/ig,
    /\[ol\]/ig, /\[\/ol\]/ig,
    /\[url\](.*?)\[\/url\]/ig,
  ];


  $format_replace = [
    '\001',
    '<p>$1</p>',
    '<span class="lbs0">$</span>',
    '<b>$1</b>',
    '<em>$1</em>',
    '<span style="text-decoration: underline;">$1</span>',
    '<li>$1</li>',
    '<ul>', '</ul>',
    '<ol>', '</ol>',
    '<a href="$1">$1</a>',
  ];
  for (var i = 0; i < $format_search.length; i++) {


    var arrText = str.trim().split(/\r|\n|\n\r|\r\n/);
    var newText = '';
    $.each(arrText, function(i, text) {
      if (text.length < 1 || text == "\r\n" || text == "\n" || text == "\r" || text == "\n\r") {
        return true;
      }
      newText += text.trim() + '\n';
    });




    str = newText.replace($format_search[i], $format_replace[i]);
  }
  return str;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
  <p>
    <textarea name="mytxtarea" id="mytxtarea" class="ed">This is a sample text</textarea>
  </p>
  <p id="posttextareadisplay"></p>
  <p>
  </p>
</form>

OR LOGIC就像这样

从PHP传递的变量如下:

 This is man.

 Man like dog.
 Man like to drink.

 Man is the king."

我希望我的结果在Javascript转换后看起来像这样:

 This is man<br />Man like dog. Man like to drink.<br />Man is the king."

2 个答案:

答案 0 :(得分:0)

试试这段代码。它通过使用$('.button').on('dblclick',function{........});

在按钮上单击2次显示文本

&#13;
&#13;
$(document).ready(function() {
  $('.button').on("dblclick", function() {
    var gogel = $('#mytxtarea').val();

    $('#posttextareadisplay').html(telol(gogel));
  });

  $('#mytxtarea').on("input propertychange", function() {
    var gogel = $('#mytxtarea').val();

    $('#posttextareadisplay').html(telol(gogel));
  });
})

function telol(str) {

  $format_search = [
    /\r\n|\r|\n|\n\r/g,
    /(.*?)\001/g,
    /\[arab\](.*?)\[\/arab\]/ig,
    /\[b\](.*?)\[\/b\]/ig,
    /\[i\](.*?)\[\/i\]/ig,
    /\[u\](.*?)\[\/u\]/ig,
    /\[\*\](.*?)(\n|\r\n?)/ig,
    /\[ul\]/ig, /\[\/ul\]/ig,
    /\[ol\]/ig, /\[\/ol\]/ig,
    /\[url\](.*?)\[\/url\]/ig,
  ];


  $format_replace = [
    '\001',
    '<p>$1</p>',
    '<span class="lbs0">$</span>',
    '<b>$1</b>',
    '<em>$1</em>',
    '<span style="text-decoration: underline;">$1</span>',
    '<li>$1</li>',
    '<ul>', '</ul>',
    '<ol>', '</ol>',
    '<a href="$1">$1</a>',
  ];
  for (var i = 0; i < $format_search.length; i++) {


    var arrText = str.trim().split(/\r|\n|\n\r|\r\n/);
    var newText = '';
    $.each(arrText, function(i, text) {
      if (text.length < 1 || text == "\r\n" || text == "\n" || text == "\r" || text == "\n\r") {
        return true;
      }
      newText += text.trim() + '\n';
    });




    str = newText.replace($format_search[i], $format_replace[i]);
  }
  return str;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
  <p>
    <textarea name="mytxtarea" id="mytxtarea" class="ed">This is a sample text</textarea>
  </p>
  <p id="posttextareadisplay"></p>
  <p>
  </p>
</form>

<button class="button">
click here
</button>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

在您的格式搜索和替换数组中,您正在寻找来自任何主要操作系统的新行字符,然后将其替换为/ 001,然后将其转换为段落<p>元素。

例如,如果只需要1个回车符,则需要一个换行符<br/>,您可以先查找\ n \ n(以所有形式)并将其定义为\ 001,并且然后返回查找所有单个换行符\ n并将其定义为\ 002。

然后,每当你看到\ 001时,它就会是<p>标签,每当你看到一个\ 002时,它应该被转换为<br/>

$format_search = [
  /\r\n\r\n|\r\r|\n\n|\n\r\n\r/g,
  /\r\n|\r|\n|\n\r/g,
  /(.*?)\001/g,
  /(.*?)\002/g,
  ...
];

$format_replace = [
  '\001',
  '\002',
  '<p>$1</p>',
  '$1<br/>',
  ...
];