텍스트 영역의 줄 바꿈을 비동기 적으로 반영

이 기사의 내용

간단한 블로그 게시 사이트를 만들었습니다.
비동기 통신으로 블로그 투고했을 때에, 개행이 반영되지 않게 되어 버렸으므로, 그것을 해결한 방법을 비망록도 겸해 기사로 합니다.

지적 등이 있으면 코멘트를 부탁드립니다.

만든 것

간단한 블로그 게시 사이트입니다.

Ruby, Rails, jQuery

Bootstrap

게시 양식

= form_for @blog do |f|
  .form
    = f.text_area :content, placeholder: "#{@blog.content}", class: "form__text"
    = f.label :image, class: "form__file" do
      = fa_icon 'image'
    = f.file_field :image, class: "form__file--default"
    = f.submit "投稿", class: "btn btn-primary form__btn"

블로그이므로 text_field 대신 text_area에서 줄 바꿈을 할 수 있도록했습니다.
이미지 게시 버튼은 마지막 기사
의 복습도 겸해 fontawesome를 사용하고 있습니다.

투고 표시(리로드시)

.card
  .card-body
    %h5.card-title
      = blog.user.name
    %h6.card-subtitle.mb-2.text-muted
      = blog.created_at.strftime("%Y/%m/%d(%a) %H:%M")
    %p.card-text
      = simple_format(blog.content)
      - if blog.image?
        = image_tag(blog.image)
    - if user_signed_in?
      = link_to "コメント(#{blog.comments.length})", blog_path(blog), class: "card-link"
      - if blog.user == current_user
        = link_to "編集", edit_blog_path(blog), class: "card-link"
        = link_to "削除", "/blogs/#{blog.id}", method: :delete, class: "card-link"

리로드했을 때에는 simple_format 를 사용하고 있으므로 개행이 반영됩니다.

비동기 게시

당초 이런 코드를 쓰고 있었습니다만, 개행이 반영되지 않았습니다.

$(function(){
  function buildHTML(blog){
    var content = blog.content ? `${blog.content}` : "";
    var image = blog.image ? `<img src=${blog.image}>` : " ";
    var html = `<div class="card">
                  <div class="card-body">
                    <h5 class="card-title">
                      ${blog.user_name}
                    </h5>
                    <h6 class="card-subtitle mb-2 text-muted">
                      ${blog.created_at}
                    </h6>
                    <p class="card-text">
                    </p>
                    <p>${content}</p>
                    <p>${image}</p>
                    <a class="card-link" href="/blogs/${blog.id}">コメント(0)</a>
                    <a class="card-link" href="/blogs/${blog.id}/edit">編集</a>
                    <a class="card-link" rel="nofollow" data-method="delete" href="/blogs/${blog.id}">削除</a>
                  </div>
                </div>`;
    return html
  }

  $('#new_blog').on('submit', function(e){
    e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
      url: '/blogs',
      type: 'POST',
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })
    .done(function(data){
      var html = buildHTML(data);
      $('.blogs').prepend(html);
      $('#new_blog')[0].reset();
    })
    .fail(function(){
      alert('送信に失敗しました')
    })
    .always(function(){
      $('input[type=submit]').removeAttr("disabled");
    })
  });
});

form이 submit되면 비동기 통신을 하고, buildHTML로 HTML을 작성해, blog의 맨 위에 추가한다, 라고 하는 흐름입니다.

주목해야 할 것은 buildHTML의 설명입니다.

시험에
test
test
test
라고 투고해, 검증 툴로 확인했더니, content는 이하와 같은 형태로 되어 있었습니다.

<p>test
test
test</p>

HTML에서는 개행은 무시되어 버립니다. 명시적으로 하기 위해서는 <br> 로 개행을 나타내 줘야 합니다.

그래서, form로 보내지는 개행 코드를 <br> 로 옮겨놓는 기술을 추가했습니다.
html에서 content를 text로 변경하고 있습니다.

function buildHTML(blog){
    var content = blog.content ? `${blog.content}` : "";
    // 改行コード \n|\r\n|\r を <br> に置き換える
    var text = content.replace(/\n|\r\n|\r/g, '<br>');
    var image = blog.image ? `<img src=${blog.image}>` : " ";
    var html = `<div class="card">
                  <div class="card-body">
                    <h5 class="card-title">
                      ${blog.user_name}
                    </h5>
                    <h6 class="card-subtitle mb-2 text-muted">
                      ${blog.created_at}
                    </h6>
                    <p class="card-text">
                    </p>
                    <p>${text}</p>
                    <p>${image}</p>
                    <a class="card-link" href="/blogs/${blog.id}">コメント(0)</a>
                    <a class="card-link" href="/blogs/${blog.id}/edit">編集</a>
                    <a class="card-link" rel="nofollow" data-method="delete" href="/blogs/${blog.id}">削除</a>
                  </div>
                </div>`;
    return html
  }

이것으로
test
test
test
라는 게시물

<p>test<br>test<br>test</p>

이렇게 반영되게 무사히 개행할 수 있었습니다!

참고

개행 코드·정규 표현에 대해서
htp://w wcc 후 rs. 코 m/아 r치ゔぇs/2551