如何动态替换字符串？根据列数自动设置col-md-x类

核心思路很清晰：先拆分每个{columns}独立块，统计块内{col}的数量，再借助Bootstrap的12列栅格规则算出对应的列宽类名（毕竟Bootstrap默认是12列布局，列宽数字就是12 ÷ 列数），最后把模板标签替换成标准的HTML结构就行。

下面直接给你可复用的JavaScript实现代码：

代码实现 #

function convertTemplateToBootstrap(template) {
  // 全局匹配所有{columns}...{/columns}块，s修饰符让.能匹配换行
  const columnsRegex = /{columns}(.*?){\/columns}/gs;
  
  // 逐个处理每个columns块
  return template.replace(columnsRegex, (match, innerContent) => {
    // 统计当前块里{col}的数量
    const colCount = (innerContent.match(/{col}/g) || []).length;
    if (colCount === 0) return ''; // 没有col的块直接忽略
    
    // 计算Bootstrap列宽类：12除以列数，确保是整数（适配2、3、4、6这类常见列数）
    const colClass = `col-md-${12 / colCount}`;
    
    // 把每个{col}内容{/col}转换成带类名的div
    const convertedCols = innerContent.replace(/{col}(.*?){\/col}/gs, (_, colContent) => {
      return `<div class="${colClass}">${colContent.trim()}</div>`;
    });
    
    // 用row容器包裹所有转换后的列
    return `<div class="row">${convertedCols}</div>`;
  });
}

// 测试你的模板示例
const originalTemplate = `{columns} {col} Column 1 {/col} {col} Column 2 {/col} {/columns} ... {columns} {col} Column 1 {/col} {col} Column 2 {/col} {col} Column 3 {/col} {/columns}`;
const result = convertTemplateToBootstrap(originalTemplate);
console.log(result);

代码细节说明 #

• 匹配columns块：用正则/{columns}(.*?){\/columns}/gs精准捕捉每个独立的columns模块，不管块内有没有换行都能匹配到。
• 统计列数：通过match(/{col}/g)统计当前块内{col}的出现次数，得到需要拆分的列数。
• 计算列宽类：按照Bootstrap的12列规则，用12 ÷ 列数得到对应的col-md-x类名——比如2列对应col-md-6，3列对应col-md-4，完全符合你的需求。
• 替换col标签：把每个{col}...{/col}替换成带正确类名的div，最后用row类的div把所有列包裹起来，完美贴合Bootstrap的布局结构。

输出结果 #

运行代码后，你的测试模板会转换成：

<div class="row"> <div class="col-md-6">Column 1</div> <div class="col-md-6">Column 2</div> </div> ... <div class="row"> <div class="col-md-4">Column 1</div> <div class="col-md-4">Column 2</div> <div class="col-md-4">Column 3</div> </div>

额外适配提示 #

如果你的模板里可能出现列数无法整除12的情况（比如5列），可以加个小逻辑处理，比如默认用自适应宽度：

const colClass = colCount > 0 ? `col-md-${Math.floor(12 / colCount) || 'auto'}` : 'col-md-auto';

这样不管多少列都能灵活适配啦！

内容的提问来源于stack exchange，提问作者test123456