JQuery SyntaxError：由于文本区域中的断行而导致未终止的字符串文字

Question

我的 jquery 代码中有一个 textarea，当用户在 textarea 中键入一些包含换行符的字符串时，它将正确保存在表中。但是当我尝试在编辑页面中显示此字符串时，由于输入导致此 jquery 错误：

SyntaxError: 未终止的字符串文字

这是我的代码：

+ '<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);

但是我的字符串中需要换行符，有什么办法可以防止这个错误或有什么解决方案来处理这个问题吗？我感谢任何帮助..

当我尝试回显包含带有 enter 的字符串的 $text 变量时，我的 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