javascript - 使用数组替换 div 中的占位符

Question

我习惯在 PHP 中以这种方式处理它，所以我想知道是否也可以在 Javascript 中这样做。这是我尝试过的:

$("#company-details").html(function () {
  var find = ['%title%', '%description%', '%photo%', '%website%', '%branch%', '%refnr%'];
  var replace = [value.title, value.description, value.photo, value.website, value.branch, value.refnr];
  return $(this).html().replace(find, replace); 
});

但是一旦我向任何数组添加超过 1 个值，它就不再起作用。

Answer 1

我认为这行不通，您可能必须循环并替换

$("#company-details").html(function (i, html) {
    var find = ['%title%', '%description%', '%photo%', '%website%', '%branch%', '%refnr%'];
    var replace = [value.title, value.description, value.photo, value.website, value.branch, value.refnr];
    $.each(find, function (i, key) {
        html = html.replace(key, replace[i]);
    })
    return html;
});

---

我觉得可以剪成

if (!RegExp.escape) {
    RegExp.escape = function (s) {
        return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
    };
}


var value = {
    title: 'title',
    description: 'description',
    photo: 'photo',
    website: 'website',
    branch: 'branch',
    refnr: 'refnr',
};
$("#company-details").html(function (i, html) {
    var find = ['title', 'description', 'photo', 'website', 'branch', 'refnr'];
    $.each(find, function (i, key) {
        var regex = new RegExp('%' + RegExp.escape(key) + '%', 'g')
        html = html.replace(regex, value[key]);
    })
    return html;
});

#company-details {
    white-space: pre-line;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="company-details">
    Title: %title%
    Description: %description%
    Photo: %photo%
    Website: %website%
    Branch: %branch%
    Refnr: %refnr%
    Title2: %title%
</div>