处理包含撇号的功能参数？

Question

我目前具有允许用户编辑名称并提交其更改的功能。问题是，如果用户名带有撇号，它将不会触发该函数，并返回以下错误消息：Uncaught SyntaxError: missing ) after argument list

我已经尝试过：

let newName = service.toString().replace(/^\s+|\s+$/g,''); 
let viewhtml = '<h2 style="text-align: center" id="serviceh2"><span id="servicename">'+service['name']+'</span> <i class="fa fa-pencil addPointer" onclick=editName(\''+newName['name']+'\',\''+id+'\');">`

这有效，但是当我检查元素时，它实际上是“未定义的”。我可以编辑名称并提交新名称，但是当我使用文本字段时，在编辑时会显示“ undefined”。我可以删除它，但是我认为用空白文本字段编辑文本是不明智的做法，因此实际上未定义元素也是如此。

这里是编辑名称的功能：

function editName(currentname, serviceid) {
    document.getElementById('serviceh2').innerHTML = '<input type="text" id="servicenameedit" value="'+currentname+'"><button type="button" onclick="submitEditName(\''+serviceid+'\');">Submit</button>'; 
}

关于如何进行的任何建议？