如何替换 jQuery DOM 元素中的字符串答案

【问题标题】：How to replace strings in jQuery DOM element如何替换 jQuery DOM 元素中的字符串
【发布时间】：2014-04-22 00:16:54
【问题描述】：

我需要从 jQuery ajax 响应构建 HTML。我不喜欢在 javascript 中嵌套丑陋的字符串，也不想使用 mustache 或任何其他模板脚本。

所以我采用了一个带有 display: none 的模板 HTML 的方法，如下所示：

<div id="message-template" class="message-tile" style="display: none;">
    <div class="profile-thumb"><img src="{{thumb-url}}" width="48" height="48" alt="{{person-name}}" /></div>
    <div class="message-data">
        <div class="message-info">
            <div class="sender-name">
                <a href="{{person-url}}">{{person-name}}</a>
            </div>
            <div class="posted-to">
                To <a href="{{posted-to-url}}">{{posted-to-title}}</a>
            </div>
        </div>
        <div>{{message-body}}</div>
    </div>
</div>

我希望能够将 {{ }} 之间的字符串替换为 json 对象中的实际值。假设这是在 jQuery.ajax onSuccess 事件上调用的函数：

function createNewElement(jsonObj) {
    var $clone = $('#message-template').clone();
    $clone.replaceString("{{person-name}}", jsonObj.personName);
    $clone.replaceString("{{thumb-url}}", jsonObj.thumbUrl);
    $clone.replaceString("{{person-url}}", jsonObj.personUrl);
    // etc
    $("#target-container").append($clone);
}

我发明了 replaceString 方法，但有类似的吗？还是我需要使用 find() 遍历每个子元素？

【问题讨论】：

标签： javascript jquery string replace

【解决方案1】：

其实你可以使用<script type = "text/template">来创建你自己的模板，这样它就不会在你的页面上渲染：

<script id="message-template" type = "text/template">

    <div class="message-tile" style="display: none;">
        <div class="profile-thumb"><img src="{{thumb-url}}" width="48" height="48" alt="{{person-name}}" /></div>
        <div class="message-data">
            <div class="message-info">
                <div class="sender-name">
                    <a href="{{person-url}}">{{person-name}}</a>
                </div>
                <div class="posted-to">
                    To <a href="{{posted-to-url}}">{{posted-to-title}}</a>
                </div>
            </div>
            <div>{{message-body}}</div>
        </div>
    </div>

</script>

以下是替换值的方法：

function createNewElement(jsonObj) {
    var $clone = $('#message-template').html();
    $clone = $clone.replace("{{person-name}}", jsonObj.personName)
                   .replace("{{thumb-url}}", jsonObj.thumbUrl)
                   .replace("{{person-url}}", jsonObj.personUrl);
    // etc
    $("#target-container").append($clone);
}

【讨论】：

太棒了！我不知道 type="text/template" 的脚本是什么。非常优雅的解决方案。还有一个问题。是否有 .replaceAll 因为我有不止 1 次出现 {{person-name}}
不，但我在 SO 上找到了this，或者您可以自己实现。 :p

【解决方案2】：

有一个replace() 方法可以接受正则表达式，这将使其更加灵活。

这样的事情就可以了...

html.replace(/\{\{([^}]+)\}\}/g, function(all, key) {                   
                return jsonObj[key] || all;
            });

这样，{{personName}} 将从 jsonObj.personName 获取值。

【讨论】：

使用正则表达式将值替换为相应的键是一个非常有趣的解决方案。除了 {{x}} 之外，还有其他格式可以使正则表达式更简单地用 obj.x 替换 {{x}} 吗？可能是#[x]# 什么的
@TKoL 确实可以这样做，尽管您仍然需要转义括号。双括号在模板语言中很常见。

【解决方案3】：

function createNewElement(jsonObj) {
    var $clone = $('#message-template').clone();
    $clone.html($clone.html().replace("{{person-name}}", jsonObj.personName));
    $clone.html($clone.html().replace("{{thumb-url}}", jsonObj.thumbUrl));
    $clone.html($clone.html().replace("{{person-url}}", jsonObj.personUrl));
    // etc
    $("#target-container").append($clone);
}

【讨论】：