Replace on an object

Question

Replace on an object

Navigation

#1 by (1 votes)

1

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

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 at the time of displaying I am not able to replace &nbsp with <br> to format correctly in modal to 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

asked by anonymous 19.12.2018 / 17:07

1 answer

Unsuccessfully installing an app on a tablet Genesis GT-7240 CSS - Position: relative; VS Position: absolute;

score 1 · Accepted Answer

The problem is that   is read as a single space.

Change   in replacce by \s , which represents a space in regex:

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

And change .text by .html to this line so that <br> is interpreted as HTML rather than pure 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><scriptsrc="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>