Remove all White Spaces from Textarea

Question

I would like to know how to remove all blanks from one textarea.

I have a field textarea that copies the value to a second field textarea, would like to perform a function that removes space or line break. My function did not work.

$(function () {

    $('#texto').on('input', function () {
        var texto = $(this).val();
        function trim(texto) {
                return texto.replace(/^\s+|\s+$/g,"");
        }
        $('#convertido1').val(texto);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container" style="margin-top:100px">

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="textoOriginal">Insira seu Texto</label>
                <textarea class="form-control" id="texto" class="texto" rows="3"></textarea>
            </div>
        </div>
        <div class="col-md-6">
            <label for="textoConvertido">Insira seu Texto</label>
            <textarea class="form-control" id="convertido1" name="convertido1" rows="3"></textarea>
        </div>
    </div>

</div>

Answer 1

Try it this way:

$(function () {
  $('#texto').on('input', function () {
    var texto = $(this).val();
    texto = texto.replace(/^\s+|\s+$/g,"");
    
    $('#convertido1').val(texto);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container" style="margin-top:100px">

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="textoOriginal">Insira seu Texto</label>
                <textarea class="form-control" id="texto" class="texto" rows="3"></textarea>
            </div>
        </div>
        <div class="col-md-6">
            <label for="textoConvertido">Insira seu Texto</label>
            <textarea class="form-control" id="convertido1" name="convertido1" rows="3"></textarea>
        </div>
    </div>

</div>

OBS.: The regex was made to take the spaces and breaks of the beginning and the end of the text only, if you want to take out all the spaces and breaks of the text, just change its regex to:

/\s/g

Answer 2

This code causes two spaces to be replaced by one and the line break is removed allowing the user to use only one space to separate the text.

$(function () {

    $('#texto').on('input', function () {
        let texto = $(this).val().replace(/\s{2,}/g,' ');
        $(this).val($(this).val().replace(/\r?\n|\r/g,'').replace(/\s{2,}/g,' '));
        $('#convertido1').val(texto);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container" style="margin-top:100px">

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="textoOriginal">Insira seu Texto</label>
                <textarea class="form-control" id="texto" class="texto" rows="3"></textarea>
            </div>
        </div>
        <div class="col-md-6">
            <label for="textoConvertido">Insira seu Texto</label>
            <textarea class="form-control" id="convertido1" name="convertido1" rows="3"></textarea>
        </div>
    </div>

</div>

But if you don’t want any space to be allowed to use replace(/\s{2,}/g,'') in place of replace(/\s{2,}/g,' ').