0

I have a template which I want to convert to text and place in a textarea. It's working but it is coming on different lines in the textarea. How can I place it on the same line in the textarea?

function extract() {
  var checkbox = $('body').find('input:checkbox:checked');
  if (checkbox.length) {
    var item = $(checkbox).closest('.list-group-item').clone();
    $(item).find('.checkbox-container').remove();
    
    $(item).find('select').each(function(index, ele) {
      $(ele).replaceWith($(ele).find(":selected").text())
    });
    
    $(item).html().replace(/(\r\n|\n|\r)/gm, "");

    $("#message").val($(item).html());
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div style="margin-bottom:20px;">
  Click on checkbox and then click on extract message
</div>
<li class="list-group-item">Greetings From Example , this
  <select>
    <option value="Diwali">Diwali</option>
    <option value="Christmas">Christmas</option>
    <option value="newyear">New Year</option>
  </select>
  explore a wide new variety of collection and get
  <select>
    <option value="10">10%</option>
    <option value="20">20%</option>
    <option value="40%">40%</option>
  </select> cashback . Visit now at example.com

  <label class="checkbox-container">
    <input name="template_id" type="checkbox" value="TI_C_3">
     <span class="checkmark"></span>
   </label>

</li>

<button onclick="extract()"> Extract Message </button>
<div style="margin-top:20px;">
  <textarea rows="10" cols="50" id="message" readonly></textarea>
</div>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
aryanknp
  • 1,135
  • 2
  • 8
  • 21

1 Answers1

1

$(item).html().replace(/(\r\n|\n|\r)/gm, "") just return the new string and will not change the html of item. To make it work, you need to do something like $(item).html($(item).html().replace(/(\r\n|\n|\r)/gm, "")) or pass it directly to .val() like this $("#message").val($(item).html().replace(/(\r\n|\n|\r)/gm, ""));

function extract(){
  var checkbox = $('body').find('input:checkbox:checked');
  if(checkbox.length){
    var item = $(checkbox).closest('.list-group-item').clone();
    $(item).find('.checkbox-container').remove();
    $(item).find('select').each(function(index,ele) {
      $(ele).replaceWith($(ele).find(":selected").text())
    });
    $("#message").val($(item).html().replace(/(\r\n|\n|\r)/gm, ""));
  }
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
<body>
<div style="margin-bottom:20px;">
Click on checkbox and then click on extract message
</div>
<li class="list-group-item">Greetings From Example , this 
    <select>
    <option value="Diwali">Diwali</option>
    <option value="Christmas">Christmas</option>
    <option value="newyear">New Year</option>
    </select>
explore a wide new variety of collection and get  
<select>
    <option value="10">10%</option>
    <option value="20">20%</option>
    <option value="40%">40%</option>
    </select> cashback . Visit now at example.com

    <label class="checkbox-container">
    <input name="template_id" type="checkbox" value="TI_C_3">
     <span class="checkmark"></span>
   </label>

    </li>
    
    <button onclick="extract()"> Extract Message </button>
    <div style="margin-top:20px;">
    <textarea rows="10" cols="50" id="message" readonly></textarea>
    </div>
    </body>
    </html>
Cuong Le Ngoc
  • 11,595
  • 2
  • 17
  • 39