1

Eu faço uma chamada Ajax e essa chamada me retorna alguns dados. Eu preciso passar um dado de descrição, é uma string com um texto, porém para passar esses dados no modal estou utilizando o data- e para isso preciso converter para texto. Estou buscando um método para poder formatar essa descricao dentro do modal. Removendo o &nbsp e colocando no lugar um <br>.

Como está sendo feito o data

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+`">

E dai na hora de exibir não estou conseguindo substituir os &nbsp por <br> para formatar corretamente no 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)
})
6
  • O replace me parece correto. Não está fazendo a substituição?
    – Sam
    19/12/2018 às 16:43
  • Aqui: modal.find('#descricaoModal').text(descricaoFormatada) teria que ser modal.find('#descricaoModal').html(descricaoFormatada) para o <br> funcionar como HTML.
    – Sam
    19/12/2018 às 16:45
  • @Sam já esta como html porém mesmo assim não funciona. 19/12/2018 às 16:56
  • O replace não está funcionando? O que não está funcionando?
    – Sam
    19/12/2018 às 16:59
  • Não está funcionando o replace, queria substituir pela tag <br> mas o replace não esta causando efeito nenhum. 19/12/2018 às 17:00

1 Resposta 1

1

O problema é que o &nbsp; é lido como um espaço simples.

Troque o &nbsp; no replacce por \s, que representa um espaço na regex:

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

E troque .text por .html nesta linha para que o <br> seja interpretado como HTML e não como texto puro:

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

Exemplo:

$('#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>

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .