javascript - 查看源代码时如何使代码成为单行？

Question

我正在尝试创建一个动态添加输入的按钮，因为我使用的是 Zend 框架，所以我使用此方法从表单文件获取输入:<?php echo $this->formm->getElement('refA'); ?>

但我收到此错误:未捕获的语法错误:意外的标识符

该添加按钮的 jquery 函数是:

$(document).ready(function (){
    var j = "<?php echo $this->formm->getElement('refA'); ?>";
    $("#add-more").click(function(){   
        $(".row").append(j);
    });
});

当我单击该错误时，它会显示错误所在的位置，它似乎使用:

$(document).ready(function (){
    var j = "<label for="refA" class="optional">Article:</label>
             <select name="refA" id="refA" class="form-control">
               <option value="test1" label="test1">test1</option>
             </select>";
    $("#add-more").click(function(){   
        $(".row").append(j);
    });  
});

是否可以在单行中生成代码，以便我可以使按钮正常工作？

Answer 1

看起来这是一个引用问题 - PHP 放入其中的数据有双引号，它会不断终止您的字符串。尝试将其用单引号括起来 - 并为 refA 进行转义:

$(document).ready(function (){
    var j = '<?php echo $this->formm->getElement(\'refA\'); ?>';
    $("#add-more").click(function(){   
        $(".row").append(j);
    });
});

好吧，在做了更多挖掘之后，您需要去掉前面的引号和空格。不幸的是，我不是 PHP 人员 - 所以我希望语法是正确的 - 这个想法是从 refA 获取数据并将其存储在 $message 中 - 然后删除任何空格并转义任何引号，然后回显要设置为“j”的值:

$(document).ready(function (){
   var j = '<?php $message = $this->formm->getElement("refA"); $message = preg_replace("/\r?\n/", "\\n", addslashes($message));echo $message?>'
   $("#add-more").click(function(){   
       $(".row").append(j);
   });
});

在这里找到 PHP 方法: https://www.the-art-of-web.com/php/javascript-escape/

另一个完全解决这个问题的选项是使用 es6 - template-strings (back-ticks)

$(document).ready(function (){
    var j = `<?php echo $this->formm->getElement("refA"); ?>`;
    $("#add-more").click(function(){   
        $(".row").append(j);
    });
});

大多数现代浏览器都会原生处理 es6 Template Strings