Javascript: How to insert multiple whitespaces into a paragraph <p> element?

Question

Good afternoon!

I’m inserting into a HTML TAG <p> some blanks, to complete the number of characters within a certain description (120).

I need the blanks to stay visible on the page.

Down with TAG:

<p class="descricao">Exemplo de texto</p>

But I’m having a problem adding the blanks. I tried to use character ALT + 255, alias '', but the spaces are not being inserted, I also tried to make use of ' ' but it didn’t work.

I did some tests, and when I replace the white character with letters and numbers, it works normally.

Anyone can help?

Follow the code below Javascript that I’m using:

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

<p class="descricao">Exemplo de texto</p>

<script>

var publicacoes = $( '.descricao' );

   for (var i = 0; i < publicacoes.length; i++)
   {
   var texto = publicacoes[i].textContent;
   var textoComplementar = "&nbsp;";

   for (var j = 0; j < (120 - texto.length); j++)
   {
        texto += textoComplementar;
   }

   publicacoes[i].textContent = texto;
   }

</script>

Answer 1

You can use the function padEnd to add the character you want when the defined size is not filled. Here we are defining that the text of our tag will be itself plus the character ' ' when the size of 120 is not met.

$('#teste').text($('#teste').text().padEnd(120, ' '));

Don’t forget to change the #test for your html tag id.

Answer 2

You can use innerHTML to be able to recognize the   but will also have to increase the size in the for, because   has no character, has 6...

Only recognizing spaces with innerHTML, but only 15 spaces will be inserted:

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

<p class="descricao">Exemplo de texto</p>

<script>

    var publicacoes = $('.descricao');
    var textoComplementar = "&nbsp;";

    for (var i = 0; i < publicacoes.length; i++) {
        
        for (var j = 0; j < (120 - publicacoes[i].innerHTML.length); j++) {
            publicacoes[i].innerHTML = publicacoes[i].innerHTML + textoComplementar;
        }

    }

</script>

Now leaving text 120 characters (only one change in account location)

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


<p class="descricao">Exemplo de texto</p>

<script>

    var publicacoes = $('.descricao');
    var textoComplementar = "&nbsp;";

    for (var i = 0; i < publicacoes.length; i++) {
        var restante = 120 - publicacoes[i].innerHTML.length;

        for (var j = 0; j < restante; j++) {
            publicacoes[i].innerHTML = publicacoes[i].innerHTML + textoComplementar;
        }

    }

</script>