Replace in an object

Asked

Viewed 99 times

1

I make a call Ajax and this call returns some data. I need to pass a data of descrição, is a string with a text, but to pass this data in the modal I am using the data- and for this I need to convert to text. I am looking for a method to format this descricao within the modal. Removing the &nbsp and putting in place a <br>.

How the date is being made

var descricao = $(json[i].descricao).text(); //Converter para texto, pois ela vem com as tags html

<div class="card opModalGaleria" id="`+json[i].seq_membro_galeria+`" data-toggle="modal" data-target="#modalGaleria" data-descricao="`+descricao+`">

And then when it’s time to show off I can’t replace &nbsp for <br> to properly format in modal a descrição.

$('#modalGaleria').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget)
    var descricao = button.data('descricao')
    var descricaoFormatada = descricao.replace(/&nbsp;/g,"<br/>")
    var modal = $(this)
    modal.find('#descricaoModal').text(descricaoFormatada)
})
javascript jquery

  • replace seems right to me. It’s not replacing?

  • Here: modal.find('#descricaoModal').text(descricaoFormatada) would have to be modal.find('#descricaoModal').html(descricaoFormatada) to the <br> function as HTML.

  • @Sam already this as html but still does not work.

  • replace is not working? What is not working?

  • Replace is not working, wanted to replace by <br> tag but replace is not causing any effect.

  • try to do var descricaoFormatada = descricao.toString().replace(/&nbsp;/g,"<br/>")

Show 1 more comment

1 answer

1


The problem is that the &nbsp; is read as a simple space.

Exchange the &nbsp; in the replacce by \s, which represents a space in regex:

descricao.replace(/\s/g,"<br/>")

And change .text for .html on this line so that the <br> is interpreted as HTML and not as plain text:

modal.find('#descricaoModal').html(descricaoFormatada)

Example:

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget)
    var descricao = button.data('descricao')
    var descricaoFormatada = descricao.replace(/\s/g,"<br>")
    var modal = $(this)
    modal.find('#descricaoModal').html(descricaoFormatada)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-descricao="123&nbsp;abc&nbsp;def">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <span id="descricaoModal"></span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.