CODEWITHSUNDEEP
javascriptjqueryhtml
qadenza
qadenza

Reputation: 9293

how to wrap each line inside a textarea by html tags?

I want to replace each lorem ipsum with <p>lorem ipsum</p> inside a textarea.

So each line should be wrapped by <p>...</p>.

I'm searching on google to find what code I could try - without success.

Any help?

$('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>

Upvotes: 0

Views: 630

Answers (4)

Jelly Bean
Jelly Bean

Reputation: 1219

So tried a different take which fixes the bad behavior where either doesn't update your lines if they are typed after page load or the duplicating issue with the "p" tags.

This will only update the lines if that line has no existing "p" tags. if it does it will remove them first then replace the string, this is so that there are no duplicate tags

Hope you like it. 

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>

Upvotes: 1

Cid
Cid

Reputation: 15247

You can use regex to capture every lines

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

Upvotes: 1

Jamiec
Jamiec

Reputation: 136154

You can use a combination of map and join to split the text apart, wrap it in your <p></p> tags and set the value back to the 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>

Upvotes: 3

Jack Bashford
Jack Bashford

Reputation: 44125

Use replace with a simple regex.

$('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>

If the actual result is each line in <p></p>:

$('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>

Upvotes: 2

Related Questions