Question

我在字符串中有一个模板，我想用另一个字符串中的值替换一些占位符。对于我替换的每个占位符，我还想插入一个break标签。

例如，如果在模板中找到#ADDRESS2#，则我使用以下代码将其所有出现的内容替换为字符串val.address2中的值。

    template_html = template_html.replace(/#ADDRESS2#/g, '<br />'+ val.address_2);

但是，在某些情况下，字符串val.address2为空。在这种情况下，我不想插入break标签。

所以我如下更改了代码

    if( val.address_2.length > 0 ) {
        template_html = template_html.replace(/#ADDRESS2#/g, '<br />'+ val.address_2);
    } else {
        template_html = template_html.replace(/#ADDRESS2#/g, '');
    }

是否有更好的方法编写上述代码，因为我有多个占位符，对于每个占位符，我必须编写两次代码。

Answer 1

使用正则表达式替换，并向其传递函数。

该函数将获取替换键作为输入，并根据是否有替换键，将插入一个空字符串，或使用换行符替换该替换键：

const template = "#foo# this bla bla #bar# but #baz# and stuff";

const replacements = {
  foo: "test",
  bar: "",
  baz: "not empty"
};

const result = template.replace(/#([^#]+)#/g, (match, key) => {
  // If there's a replacement for the key, return that replacement with a `<br />`. Otherwise, return a empty string.
  return replacements[key] !== undefined
    ? "<br />" + replacements[key]
    : "";
});

console.log("template:", template);
console.log("result:", result);

这里唯一的“陷阱”是模板字符串中的键必须与替换对象中的键匹配。不过，这并不一定是一件坏事，因为如果您稍后再看一下代码，它将使它更加直观。

正则表达式可能看起来很吓人，但这确实非常简单：

/#([^#]+)#/g

/：正则表达式的开始，
#：从字面上是#字符，
(：捕获组的开始，
[^#]+不是#的任何字符。 +确保它尽可能匹配，
)：捕获组的结尾，
#：从字面上是#字符，
/g：正则表达式的结尾。 g是全局标志，因此它不会在第一个结果处停止。

捕获组基本上告诉正则表达式将方括号之间的所有内容分组。然后分别返回组。

Answer 2

也许你是这个意思？

var val = {
  "address_1": "Address 1",
  "address_2": "",
  "address_10": "Address 10",
}  
var template_html = `My address is #ADDRESS1# delivery address is #ADDRESS2# and billing is #ADDRESS10#`
template_html = template_html.replace(/#ADDRESS(\d+)#/g, function(addr, num) { 
  var str = val["address_"+num]; return str?str+"<br/>":""
})
console.log(template_html)

Answer 3

您可以带支票取值。

template_html = template_html.replace(
    /#ADDRESS2#/g,
    val.address_2 && '<br />' + val.address_2
);

对于不止一个占位符，您可以采用动态方法，并使用相同的模式进行搜索和替换。

var val = { address_2: 'foo', country_1: 'bar' }
    template_html = 'Address: #ADDRESS2#\nCountry: #COUNTRY1#\nnothing: #NOTHING#'

template_html = template_html.replace(
    /#([^#]+)#/g,
    (_, group) => {
        var key = group.match(/^(\D+)(\d*)$/).slice(1).map(s => s.toLowerCase()).join('_');

        return (val[key] || '') && '<br />' + val[key];
     }
);
console.log(template_html);

为了获得更智能的替代品，您可以将相同的字符串与tempate相同，并从对象中获取数据。在这种情况下，请使用替换值并将其作为对象的键，或者将空字符串用于未知值。

var val = { ADDRESS2: 'foo', COUNTRY1: 'bar' }
    template_html = 'Address: #ADDRESS2#\nCountry: #COUNTRY1#\nnothing: #NOTHING#'

template_html = template_html.replace(
    /#([^#]+)#/g,
    (_, key) => (val[key] || '') && '<br />' + val[key]
);
console.log(template_html);

Answer 4

如果将相同的逻辑应用于多个地址字段，那么您可能会受益于辅助函数：

template_html = template_html
    .replace(/#CITY1#/g, PrefixBrIfNotEmpty(val.city_1))
    .replace(/#CITY2#/g, PrefixBrIfNotEmpty(val.city_2))
    .replace(/#CITY3#/g, PrefixBrIfNotEmpty(val.city_3))
    .replace(/#ADDRESS1#/g, PrefixBrIfNotEmpty(val.address_1))
    .replace(/#ADDRESS2#/g, PrefixBrIfNotEmpty(val.address_2))
    .replace(/#ADDRESS3#/g, PrefixBrIfNotEmpty(val.address_3));

function PrefixBrIfNotEmpty(str) {
    return str ? '<br />' + str : '';
}

Answer 5

您可以使用三元运算符（空字符串计算为false）

template_html = template_html.replace(/#ADDRESS2#/g, val.address_2 ? '<br />'+ val.address_2 : '');

Answer 6

最简单的更改是使用像这样的三元运算符：

template_html = template_html.replace(/#ADDRESS2#/g, ( val.address_2.length > 0 ) ? '<br />'+ val.address_2 : '');

仍然没有特别的优雅，但是比原始的要短。

Answer 7

您的意思是，像这样：

template_html = template_html.replace(/#ADDRESS(\d+)#/g, function(address, number) {
    return val.hasOwnProperty('address_' + number)
        ? '<br />' + val['address_' + number]
        : '';
};

您应该使用val.hasOwnProperty，以防val.['address_' + number]包含0，false，''，undefined，{ {1}}或其他虚假值。
由于NaN与完全没有属性不同，因此可以确保始终显示该值。

为了以防万一，它还避免从原型中获取价值。

这基于mplungjan's答案。

如果这是不受欢迎的，而您只想显示字符串，请尝试以下操作：

undefined

所有这些检查都确保它是一个非空字符串（或template_html = template_html.replace(/#ADDRESS(\d+)#/g, function(address, number) { return val.hasOwnProperty('address_' + number) && val['address_' + number].length && ( (typeof val['address_' + number]) === 'string' || val['address_' + number] instanceof String ) ? '<br />' + val['address_' + number] : ''; };实例，因为String返回一个字符串对象）。
检查它是否为new String()的实例，可以防止由于String返回typeof new String()而引起的问题。

数组和类似数组的对象具有object属性（例如：jQuery实例，NodeList，length，{length: 1}等），但是您不想将它们显示为字符串。

Javascript Replace-动态替换价值

7 个答案: