javascript - 如何使用 Smarty 将带有换行符的文本转换为 JavaScript 换行符

Question

我有一个在我正在构建的 SugarCRM 模块中使用 Smart 的模板。

下面有问题的 smarty 代码，它基本上迭代 PHP 数组，为每个数组项调用 JavaScript 函数...

{foreach from=$TASKS key=key item=task}
    add_task_row("{$task.task_id}","{$ID}","{$task.name}","{$task.description}","{$task.status}","{$task.priority}","{$task.type}","{$task.sort_order}","{$task.heading}");
{/foreach}

这是上面显示的 JavaScript 函数...

function add_task_row(taskid,projectid,name,description,status,priority,type,sort,heading){

    var ii = document.getElementById("project_tasks");
    var num = document.getElementById("tasks_count").value;

    // If TaskID is EMPTY, then assign it a new one from the row count
    var taskIDTimeStamp = new Date().getTime();
    //console.log('ID1: '+id);
    if(taskid){
        var taskid = taskid;
    }else{
        var taskid = taskIDTimeStamp;
    }

    num++;

    //var prioritySelHtml = createOptions(priority);

    var e = document.createElement("div");
    e.setAttribute('id','task_'+num);
    e.setAttribute('class','task_row');

    e.innerHTML =  '<span class="handle"></span>';

    e.innerHTML +=  '<input name="taskid_'+num+'" id="taskid_'+num+'" size=15 type="hidden" value="'+taskid+'">';

    e.innerHTML +=  '<input name="projectid_'+num+'" id="projectid_'+num+'" size=15 type="hidden" value="'+projectid+'">';

    e.innerHTML +=  '<input name="sort_order_'+num+'" id="sort_order_'+num+'" class="sort_order" size=15 type="hidden" value="'+sort+'">';

    e.innerHTML +=  '<input name="heading_'+num+'" id="heading_'+num+'" class="heading" size=15 type="hidden" value="'+heading+'">';


    if(heading == 1){

        // Add a Task Heading
        e.innerHTML +=  '<input name="name_'+num+'" id="name_'+num+'" class="task-heading" size=45 type="text" value="'+name+'" placeholder="Type a Project Task List Heading Here...">';
        e.innerHTML += '<div style="display:none; float: left; width:  400px;"><textarea name="description_'+num+'" id="description_'+num+'" rows="4" cols="50">'+description+'</textarea></div>';
        e.innerHTML += '<div style="display:none; float: left; width:  100px;"><select name="status_'+num+'" id="status_'+num+'" class="status">'+buildFormSelection(statusArray, status)+'</select></div>';
        e.innerHTML += '<div style="display:none; float: left; width:  90px;"><select name="priority_'+num+'" id="priority_'+num+'" class="priority">'+buildFormSelection(prioritiesArray, priority)+'</select></div>';
        e.innerHTML += '<div style="display:none; float: left; width:  100px;"><select name="type_'+num+'" id="type_'+num+'" class="type">'+buildFormSelection(typesArray, type)+'</select></div>';
    }else{


    // Add a Task
    e.innerHTML +=  '<input name="name_'+num+'" id="name_'+num+'" size=45 type="text" value="'+name+'">';

        //e.innerHTML += '<input name="description_'+num+'" id="description_'+num+'" size=45 type="text" value="'+description+'">';
        e.innerHTML += '<textarea name="description_'+num+'" id="description_'+num+'" class="edit_description" rows="1" cols="50">'+description+'</textarea>';
        e.innerHTML += '<select name="status_'+num+'" id="status_'+num+'" class="status">'+buildFormSelection(statusArray, status)+'</select>';
        e.innerHTML += '<select name="priority_'+num+'" id="priority_'+num+'" class="priority">'+buildFormSelection(prioritiesArray, priority)+'</select>';
        e.innerHTML += '<select name="type_'+num+'" id="type_'+num+'" class="type">'+buildFormSelection(typesArray, type)+'</select>';
    }

    //e.innerHTML += '<button type="button" onclick="remove_item_row('+num+')"><img src="index.php?entryPoint=getImage&imageName=id-ff-clear.png"></button>';
    e.innerHTML += '<button type="button" onclick="remove_item_row('+num+')"><img src="./modules/apoll_Web_Projects/assets/images/cross.png"></button>';

    e.innerHTML += '<br style="clear:both;">';

    document.getElementById("tasks_count").value = num;
    ii.appendChild(e);

}

每次调用我的 JavaScript 函数 add_task_row() 时，它都会将新的项目任务 Div 插入到 DOM 中并填充每行中的表单字段。

这在大多数情况下都很好用，但是我只是将一个不同的值保存到数据库中，现在当它加载该值时，它会导致像这样的 JavaScript 错误... Uncaught SyntaxError: Unexpected token ILLEGAL

当我查看页面源代码时，我可以看到是 1 条数据库记录导致了我的源代码中的问题......

add_task_row("1411445999407","205e34c6-7381-92eb-e6ab-54125429cd2a","ghjfghjh","dfg dhfjhg dfgosdjkfgosdfk hgdjfhdhikfgj gsidgisfdgh
fh
dfgh
d tgh
tgj
hfghj
fg hjgh0dgoh igkoiiuwidth: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;","In Progress","Low","Other","3","0");

因此，在上面的代码中，您可以看到这个长数据库值由于某种原因没有用引号引起来。

知道如何解决这个仅在数据库值看起来像特殊字符时才会发生的问题吗？

<小时/>

更新，经过进一步检查，我发现长值被引号括起来，并且经过更多测试，导致问题的不是特殊字符，而是换行符!

add_task_row("1411445999407","205e34c6-7381-92eb-e6ab-54125429cd2a","ghjfghjh","gdf;dgdfdfg 679px;width: 679px;width: 679px;
dsgdfgsdfg


dfgsdfgsdfg


dfgsdfg","In Progress","Low","Other","3","0");

有什么想法可以让带有这些换行符的字符串不会导致 JavaScript 错误吗？

Answer 1

这就是将 JavaScript 字符串放入源代码中的方法。您不能简单地转到新行。

例如以下代码正在运行

alert('1 2 3 4');

但以下情况则不然:

alert('1
2 3 4');

并且以下再次有效:

alert('1' +
'2 3 4');

如果您想在 Smarty 中进行任何更改，可以这样做:

{assign var="string" value="1
2
3
4"}
<script>

    alert ("{$string|replace:array("\n","\r"):array(' ', '')}");
</script>

使用 replace 修饰符将 \r 和 \n 更改为空格 - 它会产生很小的内容更改，但如果您不关心的话应该可以。

另一个解决方案是将新行结尾转换为纯 \n 字符串，使 JavaScript 将它们视为新行，因此您可以将上面的示例更改为:

{assign var="string" value="1
2
3
4"}
<script>

alert ("{$string|replace:array("\n","\r"):array('\n', '\n')}");
</script>

现在在警报中您将显示新行。

所以在你的情况下你可能应该改变行:

add_task_row("{$task.task_id}","{$ID}","{$task.name}","{$task.description}","{$task.status}","{$task.priority}","{$task.type}","{$task.sort_order}","{$task.heading}");

进入

add_task_row("{$task.task_id}","{$ID}","{$task.name}","{$task.description|replace:array("\n","\r"):array('\n', '\n')}","{$task.status}","{$task.priority}","{$task.type}","{$task.sort_order}","{$task.heading}");