如何修剪空白而不是javascript中的內容？

Question

所以，我知道JavaScript可以修剪空白，並修剪textarea字段中的空白，但它會刪除內容。

我要修剪的空白和保持字符（文章內容）

App.js

var postId = 0; //get data-postid from dashboard article 
var postBodyElement = null; //for .done - update page without refresh 

$('.post').find('.interaction').find('.edit').on('click', function (event) { 

    event.preventDefault(); 

    postBodyElement = document.getElementById("ed").innerHTML.trim(); 
    var postBody = postBodyElement.textContent; 

    postId = event.target.parentNode.parentNode.dataset['postid']; //get data-postid from dashboard article 
    $('#post-body').val(postBody); 
    $('#edit-modal').modal(); 
}); 

//urlEdit & token are set in the dashboard.blade.php 
$('#modal-save').on('click', function() { 
    $.ajax({ 
      method: 'POST', 
      url: urlEdit, 
      data: {body: $('#post-body').val(),postId: postId, _token: token} //get data-postid from dashboard article 
     }) 
     .done(function (msg) { 
      //console.log(msg['message']); 
      ///console.log(JSON.stringify(msg)); 
      $(postBodyElement).text(msg['new_body']); //update page without refresh 
      $('#edit-modal').modal('hide'); //hide modal 
     }); 
}); 

更多引用

Dashboard.blade.php

@extends('layouts.layout') 
@section('title') 
Dashboard 
@endsection 
@section('content') 
<div class="dashboard eli-main"> 
    <div class="container "> 
     <div class="row"> 
      <div class="col-md-6 col-md-12 push-right"> 
       <h1>{{$user->username}}</h1> 

       <h4>What do you have to say?</h4> 
       <form class="make-post"> 
        <div class="form-group"> 
         <textarea class="form-control" name="body" id="new-post" rows="5" placeholder="Your Post"></textarea> 
        </div> 
        <button type="button" id="add" class="mybtn2">Create Post</button> 
        <input type="hidden" value="{{ Session::token() }}" name="_token"> 
       </form> 
       {{ csrf_field() }} 


       <article id="owl6" class="post"></article> 

       @foreach($posts as $post) 
         <article class="post eli-main" data-postid="{{ $post->id }}"> 
         <h3>{{$post->user->username}}</h3> 
          <p id="ed" class="post-bod">{{$post->body}}</p> 
          <div class="info"> 
           made on {{ date('F d, Y', strtotime($post->created_at)) }} 
          </div> 
         <div class="interaction"> 
          @if(Auth::user() == $post->user) 

           <a href="#" class="edit">Edit</a> | 
           <a href="{{ route('post.delete', ['post_id' => $post->id]) }}">Delete</a> 

          @endif 
         </div> 

        </article> 


       @endforeach 




      </div> 


     </div> 
    </div> 
</div> 
    <div class="modal fade" tabindex="-1" role="dialog" id="edit-modal"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h2 class="modal-title">Edit Post</h2> 
       </div> 
       <div class="modal-body"> 
        <form> 
         <div class="form-group"> 
          <label for="post-body">Edit the Post</label> 
          <textarea class="form-control" name="post-body" id="post-body" rows="5"></textarea> 
         </div> 
        </form> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary" id="modal-save">Save changes</button> 
       </div> 
      </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div><!-- /.modal --> 



    <script> 
     var token = '{{ Session::token() }}'; 

     var urlEdit = '{{ route('edit') }}'; 

    </script> 
@endsection 

Answer 1

除了使用錯誤的ID（它是「post-body」，而不是「ed」），你會得到文本區域的innerHTML並修剪它 - 這就是你想要的字符串。但是在下一行中，您嘗試從字符串中獲取屬性textContent，該字符串未定義。

你應該這兩行改寫爲這樣的：

postBodyElement = document.getElementById("post-body"); 
var postBody = postBodyElement.value.trim(); 

注意，我們使用值而不是的innerHTML這裏，according to another SO post，這是獲得一個文本區域的價值的最佳途徑。