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