Jquery用换行符附加文本数据

Posted 2023-05-08

技术标签:

【中文标题】Jquery用换行符附加文本数据【英文标题】：Jquery append text data with a line break 【发布时间】：2022-01-20 18:22:14 【问题描述】：

所以我有这个脚本，它从表单中获取数据并将其附加到 html div 中。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <style>
    * 
      box-sizing: border-box;
    
    
    div 
      padding: 10px;
      background-color: #f6f6f6;
      overflow: hidden;
    
    
    input[type=text],
    textarea,
    select 
      font: 17px Calibri;
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
    
    
    input[type=button] 
      font: 17px Calibri;
      width: auto;
      float: right;
      cursor: pointer;
      padding: 7px;
    
  </style>
</head>

<body>
  <div>


    <div>
      <input type="text" id="txtName" placeholder="Enter your name" />
    </div>
    <div>
      <input type="text" id="txtAge" placeholder="Enter your age" />
    </div>
    <div>
      <input type="text" id="txtEmail" placeholder="Enter your email address" />
    </div>
    <div>
      <select id="selCountry">
        <option selected value="">-- Choose the country --</option>
        <option value="India">India</option>
        <option value="Japan">Japan</option>
        <option value="USA">USA</option>
      </select>
    </div>
    <div>
      <textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
    </div>
    <div>
      <input type="button" id="bt" value="Write" onclick="writeFile()" />
    </div>

  </div>
  <div class="output-area">
    <h4>Output</h4>
    <div id="output" class="inner">
    </div>
  </div>
  <span></span>

</body>
<script>
  let writeFile = () => 

    const name = document.getElementById('txtName');
    const age = document.getElementById('txtAge');
    const email = document.getElementById('txtEmail');
    const country = document.getElementById('selCountry');
    const msg = document.getElementById('msg');

    let data =
      'Name: ' + name.value + ' \r\n ' +  
      'Age: ' + age.value + ' \r\n ' +  
      'Email: ' + email.value + ' \r\n ' +  
      'Country: ' + country.value + ' \r\n ' +  
      'Message: ' + msg.value;


    $('#output').append("<br />" + "<br />");
    $('#output').append(document.createTextNode(data));

  
</script>

</html>

但问题是当我填写数据并单击Write 时，它会在一行中输出所有表单数据。（姓名：x 年龄：4 电子邮件：y 国家：日本消息：z）

我希望它是这样的，

Name: x 
Age: 4 
Email: y 
Country: Japan 
Message: z

Name: x 
Age: 42
Email: y 
Country: Japan 
Message: zd ....

所以我尝试使用 javascript 创建一个新行 (\n)，但似乎不影响它。

这是我尝试过的。

          'Name: ' + name.value + ' \r\n ' + '\n' +   
          'Age: ' + age.value + ' \r\n ' + '\n' +     
          'Email: ' + email.value + ' \r\n ' + '\n' +     
          'Country: ' + country.value + ' \r\n ' + '\n' +     
          'Message: ' + msg.value;

那么这里有什么问题。任何帮助将非常感激。谢谢。

【问题讨论】：

换行符在 HTML 中没有意义。您需要改用 <br /> 标签 - 或将每一行包装在 <p> 标签中您可以将数据包装在
标记中，这将启用 CRLF。 【参考方案1】：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <style>
    * 
      box-sizing: border-box;
    
    
    div 
      padding: 10px;
      background-color: #f6f6f6;
      overflow: hidden;
    
    
    input[type=text],
    textarea,
    select 
      font: 17px Calibri;
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
    
    
    input[type=button] 
      font: 17px Calibri;
      width: auto;
      float: right;
      cursor: pointer;
      padding: 7px;
    
  </style>
</head>

<body>
  <div>


    <div>
      <input type="text" id="txtName" placeholder="Enter your name" />
    </div>
    <div>
      <input type="text" id="txtAge" placeholder="Enter your age" />
    </div>
    <div>
      <input type="text" id="txtEmail" placeholder="Enter your email address" />
    </div>
    <div>
      <select id="selCountry">
        <option selected value="">-- Choose the country --</option>
        <option value="India">India</option>
        <option value="Japan">Japan</option>
        <option value="USA">USA</option>
      </select>
    </div>
    <div>
      <textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
    </div>
    <div>
      <input type="button" id="bt" value="Write" onclick="writeFile()" />
    </div>

  </div>
  <div class="output-area">
    <h4>Output</h4>
    <div id="output" class="inner">
    </div>
  </div>
  <span></span>

</body>
<script>
  let writeFile = () => 

    const name = document.getElementById('txtName');
    const age = document.getElementById('txtAge');
    const email = document.getElementById('txtEmail');
    const country = document.getElementById('selCountry');
    const msg = document.getElementById('msg');

    let data = [ 
      `<p>Name: $name.value</p>`, 
      `<p>Age: $age.value</p>`, 
      `<p>Email: $email.value</p>`,  
      `<p>Country: $country.value</p>`,  
      `<p>Message: $msg.value</p>`];
 
   
    $('#output').append("<br />" + "<br />");

    data.forEach(line => $('#output').append(line));

  
</script>

</html>

所以在这里我首先将每行数据放入<p> 标记中，然后将其放入列表中，我使用的是更简洁的模板文字。然后在列表中插入要调用.forEach() 的数据，然后将每一行（或列表的项目）添加到输出中。以下是我更改的部分。

let data = [ 
  `<p>Name: $name.value</p>`, 
  `<p>Age: $age.value</p>`, 
  `<p>Email: $email.value</p>`,  
  `<p>Country: $country.value</p>`,  
  `<p>Message: $msg.value</p>`];
 
   
$('#output').append("<br />" + "<br />");
data.forEach(line => $('#output').append(line));

【讨论】：

【参考方案2】：

您总是可以将输出包装在 <pre> 元素中。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <style>
    * 
      box-sizing: border-box;
    
    
    div 
      padding: 10px;
      background-color: #f6f6f6;
      overflow: hidden;
    
    
    input[type=text],
    textarea,
    select 
      font: 17px Calibri;
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
    
    
    input[type=button] 
      font: 17px Calibri;
      width: auto;
      float: right;
      cursor: pointer;
      padding: 7px;
    
  </style>
</head>

<body>
  <div>


    <div>
      <input type="text" id="txtName" placeholder="Enter your name" />
    </div>
    <div>
      <input type="text" id="txtAge" placeholder="Enter your age" />
    </div>
    <div>
      <input type="text" id="txtEmail" placeholder="Enter your email address" />
    </div>
    <div>
      <select id="selCountry">
        <option selected value="">-- Choose the country --</option>
        <option value="India">India</option>
        <option value="Japan">Japan</option>
        <option value="USA">USA</option>
      </select>
    </div>
    <div>
      <textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
    </div>
    <div>
      <input type="button" id="bt" value="Write" onclick="writeFile()" />
    </div>

  </div>
  <div class="output-area">
    <h4>Output</h4>
    <div id="output" class="inner">
    </div>
  </div>
  <span></span>

</body>
<script>
  let writeFile = () => 

    const name = document.getElementById('txtName');
    const age = document.getElementById('txtAge');
    const email = document.getElementById('txtEmail');
    const country = document.getElementById('selCountry');
    const msg = document.getElementById('msg');

    let data = 'Name: ' + name.value + ' \r\n' +  
      'Age: ' + age.value + ' \r\n' +  
      'Email: ' + email.value + ' \r\n' +  
      'Country: ' + country.value + ' \r\n' +  
      'Message: ' + msg.value;


    //$('#output').append("<br />" + "<br />");
    $('#output').append(`<pre>$data</pre>`);


  
</script>

</html>

【讨论】：

【参考方案3】：

为了在 HTML 中换行，您想使用 <br> 而不是 \r\n。比如这样：

let data =
  'Name: ' + name.value + '<br>' +
  'Age: ' + age.value + '<br>' +
  'Email: ' + email.value + '<br>' +
  'Country: ' + country.value + '<br>' +
  'Message: ' + msg.value;

如果您要附加 HTML，请不要使用 createTextNode() 函数，因为它会转义 HTML 实体。所以你可以简单地使用：

$('#output').append(data);

最后一件事。如果不想每次点击按钮都追加内容，可以使用html() 函数将数据输入DIV，而不是append()。

$('#output').html(data);

【讨论】：

以上是关于Jquery用换行符附加文本数据的主要内容，如果未能解决你的问题，请参考以下文章

Javascript/Jquery 使文本完美地适合 div 给定尺寸和换行符（如果需要）

使用换行符附加 NSAttributedString 会返回格式错误的属性字符串

jQuery：在 Textarea 的内容中附加一个不间断的空格

Jquery自动完成换行符不起作用

换行不适用于Crystal Report文本字段

jQuery DataTable 溢出和文本换行问题