JQuery SyntaxError：未終止的字符串文字，因爲textarea中的斷行

Question

我在我的jquery代碼中有一個textarea，當用戶鍵入一些字符串，它包含textarea中的斷行時，它將正確保存在表中。但是當我試圖表明此字符串編輯頁面它會導致這個jQuery錯誤，因爲的進入：

語法錯誤：字面未終止的字符串

這是我的代碼：

+ '<textarea placeholder="content" class="form-control " rows="5" type="text" name="InteractiveContent[' + index + '][text]" style="display: inline;" required ><?php echo @$text; ?></textarea>' 

我不得不的preg_replace暫時爲了防止出現錯誤：

$ text = preg_replace（「/ \ r | \ n /」，「」，$ text）;

但我需要我的字符串中的breake行，有沒有什麼辦法來防止這個錯誤或任何解決方案來處理這個問題？我感謝所有幫助..

這裏是我的jQuery會發生什麼，當我試圖呼應的是包含字符串$文本輸入變量：

+ '<textarea placeholder="content" class="form-control " rows="5" type="text" name="InteractiveContent[' + index + '][text]" style="display: inline;" required >this is a text with break line 
this is the rest of text after break line 

'

和所有代碼：

 <script> 

     jQuery(document).ready(function() { 
      console.log('hwllo'); 

      var index = 0; 
      console.log(index); 

      var addmorehtml = ''; 


      <?php foreach ($interactive_contents as $interactive_content) { ?> 



     <?php $id = @$interactive_content['InteractiveContent']['id']; 
      $code = @$interactive_content['InteractiveContent']['code']; 
      $text = @$interactive_content['InteractiveContent']['text']; 
      // $text = preg_replace("/\r|\n/", " ", $text); 
      ?> 

     addmorehtml += '<div index="'+index+'" id="interactive_content'+ index +'" style="display :inline;">' 


        + '<div class="form-group"><input class="form-control " value = "<?php echo @$id; ?>" type="hidden" name="InteractiveContent[' + index + '][id]" style="display: inline; width: 200px;" required /></div>' 

        + '<div class="form-group"><span class="red">*</span><input class="form-control " onkeypress="return event.charCode >= 0 && event.charCode <= 57" placeholder="کد محتوای تعاملی" value = "<?php echo @$code; ?>" type="text" name="InteractiveContent[' + index + '][code]" style="display: inline; width: 200px;" /></div>' 

        + '<div class="form-group"><span class="red">*</span><textarea placeholder="متن محتوای تعاملی" class="form-control " rows="5" type="text" name="InteractiveContent[' + index + '][text]" style="display: inline;" required >\'<?php echo @$text; ?>\'</textarea><a onclick="$('+"interactive_content"+index+').remove(); " id="del_items_2'+ index +'" href="#"">حذف</a></div></br></div>' 

       index++; 


      <?php } ?> 


      $("#interactive_content").html(addmorehtml); 

     }); 
</script> 


<a id="addmore" href="#addmore"><span style ="font-size: 15px"><b>+ افزودن محتوای تعاملی </b></span> </a> 

Answer 1

問題是你有'裏面' s。

+ '<textarea 
    placeholder="content" 
    class="form-control" 
    rows="5" 
    type="text" 
    name="InteractiveContent[' + index + '][text]" // error is here 
    style="display: inline;" 
    required 
    > 
    this is a text with break line 
    this is the rest of text after break line 
    </textarea>' 

您需要使用\'所以解析器不認爲你的字符串結尾有：

+ '<textarea 
    placeholder="content" 
    class="form-control" 
    rows="5" 
    type="text" 
    name="InteractiveContent[\' + index + \'][text]" 
    style="display: inline;" 
    required 
    > 
    this is a text with break line 
    this is the rest of text after break line 
    </textarea>' 

Answer 2

看到這個plunker可能是它有助於您

var str = new String(document.querySelector(".form-control").value); 
var newstr = str.replace(/\n/g, "<br/>"); 

https://plnkr.co/edit/78CCoOsFWo8iEuE7DRz3?p=preview