Question

我想在文本区域内用lorem ipsum替换每个lorem ipsum。

因此，每行都应用...换行。

我正在google上搜索，以查找可以尝试的代码-没有成功。

有帮助吗？

$('button').on('click', function(){
  // add <p> and </p>
});

.txa{
display:block;
width:100%;
resize:none;
height:30vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea class='txa'>
lorem ipsum
lorem ipsum
lorem ipsum
</textarea>
<br>
<button>CLICK</button>

Answer 1

您可以结合使用map和join将文本分开，将其包装在标签中，然后将值设置回textarea。

$('button').on('click', function(){
  var text = $('.txa').val();
  var result = text.split("\n")
                   .filter(x => x.length > 0)
                   .map(t => `<p>${t}</p>`)
                   .join("\n");
  $('.txa').val(result)
});

.txa{
display:block;
width:100%;
resize:none;
height:30vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea class='txa'>
lorem ipsum
lorem ipsum
lorem ipsum
</textarea>
<br>
<button>CLICK</button>

Answer 2

通过简单的正则表达式使用replace。

$('button').on('click', function() {
  $(".txa").html($(".txa").html().replace(/(lorem ipsum)/g, "&lt;p&gt;$1&lt;/p&gt;"));
});

.txa {
  display: block;
  width: 100%;
  resize: none;
  height: 30vh;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<textarea class='txa'>
lorem ipsum
lorem ipsum
lorem ipsum
</textarea>
<br>
<button>CLICK</button>

如果实际结果是中的每一行：

$('button').on('click', function() {
  $(".txa").html($(".txa").html().split("\n").map(e => `<p>${e}</p>`).join("\n"));
});

.txa {
  display: block;
  width: 100%;
  resize: none;
  height: 30vh;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<textarea class='txa'>
lorem ipsum
lorem ipsum
lorem ipsum</textarea>
<br>
<button>CLICK</button>

Answer 3

您可以使用正则表达式捕获每行

// capture everything up to a newline
/(.*[^\n])/g

$('button').on('click', function(){
  $(".txa").val($(".txa").val().replace(/(.*[^\n])/g, "<p>$1</p>"));
});

.txa{
display:block;
width:100%;
resize:none;
height:30vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea class='txa'>
lorem ipsum
lorem ipsum
bla bla
Hello world
lorem ipsum
</textarea>
<br>
<button>CLICK</button>

Answer 4

因此尝试了另一种方法，该方法解决了以下不良行为：如果在页面加载后键入行或带有“ p”标记的重复问题，行不会更新。

仅当该行没有现有的“ p”标签时，才会更新这些行。如果这样做会先删除它们，然后替换字符串，这样就不会有重复的标签

希望您喜欢它。

function insertLine() {

  var lines = $('textarea').val().split('\n');
  var newLines = '';
  for (var i = 0; i < lines.length; i++) {

    if (lines[i] !== "" && !lines[i].includes('<p>')) {
      newLines += '<p>' + lines[i] + '</p>';
      newLines += '\n';
    } else if (lines[i] !== "") {
      lines[i] = lines[i].replace('<p>', '');
      lines[i] = lines[i].replace('</p>', '');
      lines[i] = lines[i].replace(/(.*[^\n])/g, '<p>' + lines[i] + '</p>');
      newLines += lines[i];
      newLines += '\n';
    }
  }
  $('.txa').val(newLines);
}

.txa {
  display: block;
  width: 100%;
  resize: none;
  height: 30vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="txa">
text 1
text 2
text 3
Type a few lines of your own.

</textarea>
</br>
<button onclick="insertLine();">RUN</button>

如何通过html标签在textarea中换行？

4 个答案: