时间戳

首页 > 解决方案 > 替换 javascript/jquery 中的占位符

javascript - 替换 javascript/jquery 中的占位符

问题描述

在我的 JSP 站点上，我想复制一些 html 元素并重命名它们的属性以生成动态表单。目前我的 javascript 代码如下所示：

function getTemplateHtml(templateType)
{
    <%-- Get current number of elements. --%>
    var len = $('.form-group').length;
    <%-- Clone the correct template. --%>
    var $html = $(".template-"+templateType).clone();
    <%-- Replace placeholders. --%>
    $html.find('[id="PLACEHOLDER.Type"]')[0].id="filters" + len + ".Type";
    $html.find('[name="PLACEHOLDER.Type"]')[0].name="filters[" + len + "].Type";
    $html.find('[id="PLACEHOLDER.Value"]')[0].id="filters" + len + ".Value";
    $html.find('[name="PLACEHOLDER.Value"]')[0].name="filters[" + len + "].Value";
    ...
    return $html.html();    
}

由于有 20 个属性，因此代码非常长且难以维护。有没有办法.replace('PLACEHOLDER', 'filters' + len)在整个$hmtl元素上调用类似的东西？

标签： javascriptjquery

解决方案

如果你的意思是你可以在你的问题中拥有 20 个不同的属性Type，Value是的，你可以很容易地在一个循环中完成这项工作：

["id", "name"].forEach(function(prop) {
    $html.find('[' + prop + '*=PLACEHOLDER]').attr(prop, function() {
        var match = /PLACEHOLDER\.([A-Z]+)/i.exec(this[prop]);
        if (match) {
            this[prop] = "filters" + len + "." + match[1];
        }
    });
});

这会查找所有带有or的元素，PLACEHOLDER并使用替换更新or ，从or中获取属性名称（“Type”或“Value”等）。idnameidnameidname

现场示例：

var len = 27;
var $html = $("#template").clone();
["id", "name"].forEach(function(prop) {
    $html.find('[' + prop + '*=PLACEHOLDER]').attr(prop, function() {
        var match = /PLACEHOLDER\.([A-Z]+)/i.exec(this[prop]);
        if (match) {
            this[prop] = "filters" + len + "." + match[1];
        }
    });
});
console.log($html.html());
<div id="template">
<input id="PLACEHOLDER.Type">
<input name="PLACEHOLDER.Type">
<input id="PLACEHOLDER.Value">
<input name="PLACEHOLDER.Value">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如果我们可以假设idandname在同一个元素上，那就更简单了：

$html.find('[id*=PLACEHOLDER]').attr("id", function() {
    var match = /PLACEHOLDER\.([A-Z]+)/i.exec(this.id);
    if (match) {
        this.id = this.name = "filters" + len + "." + match[1];
    }
});

这会查找所有带有or的元素，PLACEHOLDER并使用替换更新or ，从or中获取属性名称（“Type”或“Value”等）。idnameidnameidname

现场示例：

var len = 27;
var $html = $("#template").clone();
$html.find('[id*=PLACEHOLDER]').attr("id", function() {
    var match = /PLACEHOLDER\.([A-Z]+)/i.exec(this.id);
    if (match) {
        this.id = this.name = "filters" + len + "." + match[1];
    }
});
console.log($html.html());
<div id="template">
<input id="PLACEHOLDER.Type">
<input name="PLACEHOLDER.Type">
<input id="PLACEHOLDER.Value">
<input name="PLACEHOLDER.Value">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

推荐阅读