使用JQUERY使用字符串中的标识符将字符串的内容放入某些DIV中？

Question

我正在使用JS / JQUERY创建一个“填充空白”客户端应用程序，该应用程序将读取从AJAX调用中检索的XML文件。

XML内部是一个节点，其中包含一个带有标签的字符串，用于标识字段的位置。

为了尝试改善用户界面体验，我使用divs在网页上格式化此表单的显示，如下所示

<div id="prologue"></div>
<div id="message"></div>
<div id="epilogue"></div>

我想通读字符串并使用控制语句检查该部分在上述div中的位置。

以下是文本节点

中的示例字符串

  

$ {Prologue} - 亲爱的$ {Title} $ {Surname}。这是来自公司的消息。一个人打电话但无法获得访问权限，已在$ {AppointmentDate} $ {AppointmentDate}之间的$ {AppointmentDate}上订购了$ {ProductName}订单号为$ {VOLNumber}的新约会。请确保您的工作人员可以在工作场所使用。如果这不方便，请在预约前一天中午12:00前前往公司网站或致电01111 1111 111。请参阅您的订单确认，了解当天会发生什么的详细信息。 $ {后记}

假设非常简单，任何不是$ {Prologue}或$ {Epilogue}的内容都在“message”中 div

我这里有伪代码

for loop through the string
if ${prologue} put inside prologue div tags
if !=$prologue and !=$epilogue then place in message div tag
if ${epilogue} then put inside epilogue div tags

我将在循环中创建一些其他规则，例如当一个 ”。”然后插入一个换行标记

输出应该是这样的

<div id="prologue">
${prologue}
</div>
<div id="message">
Dear ${Title} ${Surname}. <br/>
This is a message from The Company. An person called but was unable to gain access, a new appointment has been made for ${ProductName} with order number ${VOLNumber}, on ${AppointmentDate} between ${AppointmentSlot}. <br/>

Please ensure you are available at your premises for the engineer. If this is not convenient, go to thecompany.com or call 01111 1111 111 before 12:00 noon the day before your appointment. Please refer to your order confirmation for details on what will happen on the day. <br/>

</div>
<div id="epilogue">
${epilogue}
</div>

有人可以确定我可以用于此实现的javascript或jquery中的哪些功能。我正在考虑使用.map（）jquery函数，但我不确定这是否适用于我的情况。

请不要使用完整的代码解决方案！只是戏弄，所以我可以自己搞清楚！

修改

以下是我的无格式显示的屏幕截图

由于

Answer 1

使用fyneworks.com/jquery/xml-to-json/#tab-Download和Mustache.js

在大多数情况下使用具有大型社区的模块比重新发明轮子更好..

<script id="template" type="text/template">
    <div id="prologue">{{{prologue}}}</div>
    <div id="message">
        Dear {{Title}} {{Surname}}. <br/>
        This is a message from The Company. An person called but was unable to gain access, a new appointment has been made for {{ProductName}} with order number {{VOLNumber}}, on {{AppointmentDate}} between {{AppointmentSlot}}. <br/>

        Please ensure you are available at your premises for the engineer. If this is not convenient, go to thecompany.com or call 01111 1111 111 before 12:00 noon the day before your appointment. Please refer to your order confirmation for details on what will happen on the day. <br/>

    </div>
    <div id="epilogue">{{{epilogue}}}</div>
</script>

$.get(YOUR_XML, function(data) {
    var json = $.xml2json(data);
    var template = $('#template').html();
    var html = Mustache.to_html(template, json);
    $(YOUR_TARGET_ELEM).html(html);
});

Answer 2

要做到这一点，你需要使用一些字符串操作（提取你需要的东西），我期待标准的JavaScript正则表达式。

您还需要使用jQuery Selector找到要更新的页面上的<div>。

这应该是关于它的，我认为不需要进行map()调用 - 您可能需要稍后进行替换。

根据图片进行修改 - 毕竟您不需要map()。解析字符串，找到用jQuery选择器放置部分的位置，完成。

Answer 3

由于序言和结尾处于开头和结尾，因此您不需要在模板中使用它们。因此，在您的模板引擎中，将${prologue}和${epilogue)}替换为""，因为您不需要它们（假设您无法控制xml），并将输入元素直接插入divs。

$('#prologue').append('<input type="text" id="prologueText"/>');
$('#epilogue').append('<input type="text" id="epilogueText"/>');

如果您正在动态创建div，则可以在序言输入前添加序言div，并将结尾div和epilogue输入附加到容器div。你不想要特定的信息，所以我会停在那里。

所以你的输出是：

<div id="prologue">
<input type="text" id="prologueText"/>
</div>
<div id="message">
Dear ${Title} ${Surname}. <br/>
This is a message from The Company. An person called but was unable to gain access, a new appointment has been made for ${ProductName} with order number ${VOLNumber}, on ${AppointmentDate} between ${AppointmentSlot}. <br/>

Please ensure you are available at your premises for the engineer. If this is not convenient, go to thecompany.com or call 01111 1111 111 before 12:00 noon the day before your appointment. Please refer to your order confirmation for details on what will happen on the day. <br/>

</div>
<div id="epilogue">
<input type="text" id="epilogueText"/>
</div>