Javascript 替换 - 替换的动态值

Question

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

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

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

但是有些情况下字符串 val.address2是空的。在那种情况下，我不想插入中断标记。

所以我修改了我的代码如下

    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, '');
    }

有没有更好的方法来编写上面的代码，因为我有多个占位符并且对于每个占位符我必须编写代码 2 次。

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 是全局标志，因此它不会在第一个结果处停止。

捕获组基本上告诉正则表达式对括号之间的所有内容进行分组。然后将这些组单独返回。