如何从prompt与sub字符串中提取标记内容以预填输入字段？

要从填充后的prompt中提取替换模板sub空缺位置的动态内容，同时兼容HTML格式（带<code>标签）、纯文本格式（带单引号或其他标记）以及多语言场景，可采用以下两种核心思路实现：

方法1：匹配HTML中的<code>标签（针对HTML格式的prompt） #

如果你的prompt是HTML格式，动态内容被<code>标签包裹，可直接用正则提取标签内的内容：

function extractFromHtmlPrompt(prompt) {
  const cleanPrompt = prompt.trim().replace(/^["']|["']$/g, '');
  const codeMatches = cleanPrompt.match(/<code>(.*?)<\/code>/g) || [];
  return codeMatches.map(tag => tag.replace(/<\/?code>/g, '').trim());
}

// 测试示例
const htmlPrompt = '"Generate something in 1:1 format for <code>Birthday</code> in an <code>cheerful, celebratory</code> mood. The image should be created in an <code>Graffiti</code> style. The text <code>Happy Birthday!</code> is at the top. At the bottom is the lettering: <code>Liam</code>. Graphic elements should visually reflect the terms <code>stars, balloons</code>."';
console.log(extractFromHtmlPrompt(htmlPrompt));
// 输出：["Birthday", "cheerful, celebratory", "Graffiti", "Happy Birthday!", "Liam", "stars, balloons"]

方法2：基于模板sub的结构对比提取（通用所有格式） #

对于纯文本或无法依赖标签的场景，通过对比模板sub和填充后的prompt的字符串结构，提取两者的差异部分（即动态内容）：

function extractDynamicContent(prompt, sub) {
  // 预处理：去除首尾引号、空白字符
  const cleanPrompt = prompt.trim().replace(/^["']|["']$/g, '');
  const cleanSub = sub.trim().replace(/^["']|["']$/g, '');

  // 优先尝试匹配HTML标签内容
  const codeMatches = cleanPrompt.match(/<code>(.*?)<\/code>/g);
  if (codeMatches) {
    return codeMatches.map(tag => tag.replace(/<\/?code>/g, '').trim());
  }

  // 基于字符串位置对比提取动态内容
  const dynamicParts = [];
  let promptPos = 0;
  let subPos = 0;

  while (subPos < cleanSub.length) {
    // 找到当前sub片段在prompt中的匹配位置
    const subSegment = cleanSub.slice(subPos);
    const matchIndex = cleanPrompt.indexOf(subSegment, promptPos);

    if (matchIndex === -1) break;

    // 提取sub片段之前的动态内容
    if (promptPos < matchIndex) {
      dynamicParts.push(cleanPrompt.slice(promptPos, matchIndex).trim());
    }

    // 更新位置指针
    promptPos = matchIndex + subSegment.length;
    subPos += subSegment.length;
  }

  // 处理末尾可能剩余的动态内容
  if (promptPos < cleanPrompt.length) {
    dynamicParts.push(cleanPrompt.slice(promptPos).trim());
  }

  // 过滤空内容
  return dynamicParts.filter(part => part.length > 0);
}

// 测试纯文本示例
const textPrompt = '"Generate something in 1:1 format for \'Birthday\' in an \'cheerful, celebratory\' mood. The image should be created in an \'Graffiti\' style. The text \'Happy Birthday!\' is at the top. At the bottom is the lettering: \'Liam\'. Graphic elements should visually reflect the terms \'stars, balloons\'."';
const subTemplate = '"Generate something in 1:1 format for in an mood. The image should be created in an style. The text is at the top. At the bottom is the lettering:. Graphic elements should visually reflect the terms."';

console.log(extractDynamicContent(textPrompt, subTemplate));
// 输出：["Birthday", "cheerful, celebratory", "Graffiti", "Happy Birthday!", "Liam", "stars, balloons"]

方法优势 #

• 多格式兼容：同时支持HTML（<code>标签）和纯文本格式的prompt
• 多语言友好：基于字符串位置对比，不依赖特定语言的语法或标记符号
• 通用性强：只要prompt是模板sub填充动态内容后的完整结果，就能准确提取目标内容

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