仅当匹配模式不在内容中的特定位置时才替换匹配模式

Question

我们正在构建的部分工具在很大程度上依赖于正则表达式。 使用标准javascript的RegReg即时用真实值替换占位符。

我们所有的占位符如下所示：

{{key}}

在大多数情况下，替换很容易进行，我们建立了匹配模式，如下所示：

var pattern = new RegExp('{{key}}', 'g');

但是，在至少一种情况下，这种方法不起作用。 假设我们在href中有一个带有占位符a标签：

<a href="http://google.com?q={{key}}">http://google.com?q={{key}}</a>

我们需要用html代码替换占位符（在某些情况下），但是正如您可以想象的那样，它破坏了标记。

注意：它可能是任何链接或链接内的任何内容。

如何只替换href内部的占位符？ 可能吗？

Answer 1

根据您要对href的{{key}}进行的操作，您可以不使用花括号，也可以添加对过滤器的支持。

转义：

var values = {"key": "stackoverflow"};
var html = template.replace(/\\([{}\\])|{{(\w+)}}/g, function (match, esc, name) {
    // Remove backslashes from an escaped characters, or replace placeholders
    // by their values.
    return esc ? esc : values[name];
});

例：

<a href="http://google.com?q=\{{key}}">http://google.com?q={{key}}</a>

筛选条件：

var values = {"key": "stackoverflow"};
var filters = {
    "quote": function (value) {
        return quote.replace(/"/g, """);
    }
};
var html = template.replace(/{{(\w+(?:\s*\|\s*\w+)*)}}/g, function (match, expr) {
    var names = expr.split(/\s*\|\s*/g);
    var value = values[expr[0]];
    for (var i = 1; i < names.length; i++) {
        value = filters[name[i]](value);
    }
});

例：

<a href="http://google.com?q={{key|quote}}">http://google.com?q={{key}}</a>

---

您也可以使用AngularJS的内置模板。

var templateElm = angular.element("<div>").html(template);

var innerScope = $scope.$new(true);

// Shallow copy values into the scope
angular.extend(innerScope, values);

var elem = $compile(templateElm)(innerScope);

// Wait for automatic $digest to complete
$timeout(function () {
    var html = elem.html();

    innerScope.$destroy();

    // Do something with 'html'
});