Javascript 在脚本标记中使用HTML/模板进行HTML Dom注入

我在尝试使用html/模板包构建一些javascript时遇到了这个错误。编译器似乎对我正在做的事情的上下文和状态感到困惑。有没有办法重写编译器并避免此消息？下面是我试图执行的代码示例

模板失败：html/template:javascript.partial.tmpl:18:10:on-range循环重新输入：{{range}分支在不同上下文中结束：{stateJSRegexp delimNone urlPartNone jsCtxRegexp attrone elementScript}，{stateJS delimNone urlPartNone jsCtxRegexp attrone attrone elementScript}

函数addParameter（）{
设div=document.createElement（'div'）；
div.id='parameter'+parameterIndex.toString（）；
div.innerHTML=`
`+
{{range$index，$value:=.User.Keys}}{{{$value.keyplane}}`+
{{end}
`

2012年，我在google groups上发现了类似的问题，但答案是针对包文本/模板的，因此该来源的解决方案尚不清楚

---

似乎如果我可以将编译器的状态断言为stateHTML而不是stateJS，那么就不会有这个问题。这是我能够做到的吗？

这可以按预期工作，但Javascript中的反勾号用于定义。我相信包没有很好的装备来处理这些问题

因此，一个简单的解决方法不是在JavaScript中使用模板文字，而是使用简单的字符串文字，因此您可以使用模板操作，并且仍然可以进行上下文敏感转义

使用此模板：

<script>
function addParameter(){
        let div = document.createElement('div');
        div.id = 'parameter'+parameterIndex.toString();
        div.innerHTML = '<input type="text" name="parameters_value">'+
                '<select name="parameters_key">'+
                '{{range .User.Keys}}<option value="{{.KeyHTML}}">{{.KeyPlain}}</option>{{end}}'+
                '</select>';
        document.body.appendChild(div);
}
var parameterIndex = 1;
addParameter();
</script>`

函数addParameter（）{
设div=document.createElement（'div'）；
div.id='parameter'+parameterIndex.toString（）；
div.innerHTML=“”+
''+
“{range.User.Keys}}{{.keyplane}}{{end}”+
'';
文件.正文.附件（div）；
}
var parameterIndex=1；
addParameter（）；
`

使用输入参数对其进行测试：

t := template.Must(template.New("").Parse(src))

type Key struct {
    KeyHTML, KeyPlain string
}
m := map[string]interface{}{
    "User": map[string]interface{}{
        "Keys": []Key{
            {"h1<", "p1<"},
            {"h2>", "p2>"},
        },
    },
}

if err := t.Execute(os.Stdout, m); err != nil {
    panic(err)
}

t:=template.Must（template.New（“”）.Parse（src））
类型键结构{
KeyHTML，keyplane字符串
}
m:=map[string]接口{}{
“用户”：映射[字符串]接口{}{
“键”：[]键{
{“h1”}，
},
},
}
如果err:=t.Execute（os.Stdout，m）；err！=nil{
恐慌（错误）
}

这将输出以下HTML：

<script>
function addParameter(){
        let div = document.createElement('div');
        div.id = 'parameter'+parameterIndex.toString();
        div.innerHTML = '<input type="text" name="parameters_value">'+
                '<select name="parameters_key">'+
                '<option value="h1\x3c">p1\x3c</option><option value="h2\x3e">p2\x3e</option>'+
                '</select>';
        document.body.appendChild(div);
}
var parameterIndex = 1;
addParameter();
</script>

函数addParameter（）{
设div=document.createElement（'div'）；
div.id='parameter'+parameterIndex.toString（）；
div.innerHTML=“”+
''+
“p1\x3cp2\x3e”+
'';
文件.正文.附件（div）；
}
var parameterIndex=1；
addParameter（）；

---

如果你在浏览器中打开它，就可以正确地呈现HTML，即使是转义的

“h1，这也可以按预期工作，但是Javascript中的backtick是用来定义的。我相信这个包并没有很好地处理这些内容

因此，一个简单的解决方法不是在JavaScript中使用模板文字，而是使用简单的字符串文字，因此您可以使用模板操作，并且仍然可以进行上下文敏感转义

使用此模板：

<script>
function addParameter(){
        let div = document.createElement('div');
        div.id = 'parameter'+parameterIndex.toString();
        div.innerHTML = '<input type="text" name="parameters_value">'+
                '<select name="parameters_key">'+
                '{{range .User.Keys}}<option value="{{.KeyHTML}}">{{.KeyPlain}}</option>{{end}}'+
                '</select>';
        document.body.appendChild(div);
}
var parameterIndex = 1;
addParameter();
</script>`


函数addParameter（）{
设div=document.createElement（'div'）；
div.id='parameter'+parameterIndex.toString（）；
div.innerHTML=“”+
''+
“{range.User.Keys}}{{.keyplane}}{{end}”+
'';
文件.正文.附件（div）；
}
var parameterIndex=1；
addParameter（）；
`

使用输入参数对其进行测试：

t := template.Must(template.New("").Parse(src))

type Key struct {
    KeyHTML, KeyPlain string
}
m := map[string]interface{}{
    "User": map[string]interface{}{
        "Keys": []Key{
            {"h1<", "p1<"},
            {"h2>", "p2>"},
        },
    },
}

if err := t.Execute(os.Stdout, m); err != nil {
    panic(err)
}

t:=template.Must（template.New（“”）.Parse（src））
类型键结构{
KeyHTML，keyplane字符串
}
m:=map[string]接口{}{
“用户”：映射[字符串]接口{}{
“键”：[]键{
{“h1”}，
},
},
}
如果err:=t.Execute（os.Stdout，m）；err！=nil{
恐慌（错误）
}

这将输出以下HTML：

<script>
function addParameter(){
        let div = document.createElement('div');
        div.id = 'parameter'+parameterIndex.toString();
        div.innerHTML = '<input type="text" name="parameters_value">'+
                '<select name="parameters_key">'+
                '<option value="h1\x3c">p1\x3c</option><option value="h2\x3e">p2\x3e</option>'+
                '</select>';
        document.body.appendChild(div);
}
var parameterIndex = 1;
addParameter();
</script>


函数addParameter（）{
设div=document.createElement（'div'）；
div.id='parameter'+parameterIndex.toString（）；
div.innerHTML=“”+
''+
“p1\x3cp2\x3e”+
'';
文件.正文.附件（div）；
}
var parameterIndex=1；
addParameter（）；

如果你在浏览器中打开，正确地呈现HTML，甚至转义的
“H1模板是HTML模板还是javascript？如果你处理的是javascript文件，你可以使用tex/template而不是HTML/template。它是模板解析和执行的更广泛管道的一部分，这一部分需要适合作为{{template}调用HTML页面。是否可以将文本/模板解析和作为HTML/模板执行与我的其余页面混合使用？更新：我想出了一个解决方法，将数据初始化为javascript[]字符串数组，然后分别构建javascript代码段。如果这里有一个解决方案供将来参考，那么知道该解决方案将非常好。您是否尝试过将内容包装到标记中？代码只是整个代码段的一部分。标记紧跟在{{define}之后模板标签。谢谢你的想法！模板是HTML模板还是javascript？如果你处理的是javascript文件，你可以使用tex/template而不是HTML/template。它是模板解析和执行的更广泛管道的一部分，这一部分需要作为{{template}来处理调用HTML页面。是否可以将文本/模板解析和作为HTML/模板执行与我的其余页面混合使用？更新：我想出了一个解决方法，将数据初始化为javascript[]字符串数组，然后分别构建javascript代码段。如果这里有一个解决方案供将来参考，那就太好了。您是否尝试过将内容包装在标记中？代码只是整个代码段的一部分。标记紧跟在{{define}}模板标记之后。不过，感谢您的想法！