将变量替换为包含 HTML 的 JavaScript 字符串中数据库中的值

Question

我从编辑器收到一个字符串，其中包含 HTML 标签，如下所示：

const htmlString = "<div>Account <span contenteditable="false">{{account}}</span></div>. 
<div>Hello <span contenteditable="false">{{hello}}</span></div>"

在此内容中，有两个格式为 {{account}} 和 {{hello}} 的变量。

在我的数据库中，我以格式存储变量数据 { key: string, value: string, isDefault: boolean }:

[
   { "key" : "account", "value" : "", "isDefault" : true, },
   { "key" : "hello", "value" : "Hello everyone", "isDefault" : false }
]

首先，我使用一个函数来删除 HTML 标签：

const blockTags = /<(div|h1|h2|h3|h4|h5|h6|p|ul|ol|li|br)[^>]*>/gi;
const inlineTags = /<\/?(span|a|strong|em|b|i|u)[^>]*>/gi;

let content = htmlString.replace(blockTags, '\n').replace(/<\/(div|h1|h2|h3|h4|h5|h6|p)>/gi, '\n');
content = content.replace(inlineTags, '');
content = content.replace(/<[^>]+>/g, '');
content = content.replace(/\n\s*\n/g, '\n').trim();

然后，我提取变量：

const variables = (content.match(/\{\{(.*?)\}\}/gi) || []).map((item) => item.replace(/\{\{|\}\}/g, ''));

最后，我使用一个函数将所有变量替换为数据库中的相应值，如果变量是默认值（isDefault = true），我将根据系统规则根据配置替换为动态值：

const objVariables = variables.reduce((acc, { key, value, isDefault }) => {
    acc[key] = { value, isDefault };
    return acc;
  }, {});

const result = content.replace(/\{\{(.*?)\}\}/g, (match, variable) => {
   const variableData = objVariables[variable];
   if (variableData && variableData.isDefault) {
      if (variable === "account") {
         return "ACCOUNT_NAME";
      }
    }
   return variableData ? variableData.value : match;
});

我想用数据库中存储的值替换 HTML 字符串中的所有变量，但我认为我的代码不是最好的解决方案，而且可能很慢。我正在寻找优化的解决方案或任何建议。

Answer 1

我认为你应该迭代你的变量并替换它们（如果在字符串中找到它们）...不需要删除标签。

const myVariables =
[
  { "key" : "account",  "value" : "",               "isDefault" : true  },
  { "key" : "hello",    "value" : "Hello everyone", "isDefault" : false },
];

let myString = myContent.innerHTML;

myVariables.forEach
(
  variableData =>
  {
    const { key, value, isDefault } = variableData;
    
    myString = myString.replace
    (
      `{{${key}}}`,
      (
        ( isDefault && ( key === 'account' ) )
        ? 'ACCOUNT_NAME'
        : value ?? key
      )
    );
  }
);

myContent.innerHTML = myString;

<div id="myContent">
  <div>Account <span contenteditable="false">{{account}}</span>.</div>
  <div>Hello <span contenteditable="false">{{hello}}</span></div>
</div>

请注意，在上面的示例中，甚至没有触及 html。