通过JavaScript拆分HTML中caption的标题与副标题（Squarespace）

我的Squarespace站点页面有带说明文字的图片画廊，现有HTML结构如下：

<img>image1</img>
<div class="caption">IMAGE 1 TITLE: Subtitle</div>
<img>image2</img>
<div class="caption">IMAGE 2 TITLE: Subtitle</div>

需要完成两个修改：

• 修正<img>标签格式，将标签内的内容转为src属性
• 把每个.caption中用冒号分隔的标题与副标题拆分，分别用带title和subtitle类的<span>包裹，最终效果如下：

<img src="image1">
<div class="caption">
    <span class="title">IMAGE 1 TITLE</span>
    <span class="subtitle">Subtitle</span>
</div>
<img src="image2">
<div class="caption">
    <span class="title">IMAGE 2 TITLE</span>
    <span class="subtitle">Subtitle</span>
</div>

由于无法直接编辑HTML代码，需通过JS注入实现需求，同时可添加自定义CSS调整样式。

1. JavaScript代码注入 #

将以下代码添加到Squarespace站点的设置 > 高级 > 代码注入页面的头部或尾部：

document.addEventListener('DOMContentLoaded', function() {
    // 处理所有img标签，修正src属性
    const images = document.querySelectorAll('img');
    images.forEach(img => {
        const srcVal = img.textContent.trim();
        img.setAttribute('src', srcVal);
        img.textContent = '';
    });

    // 拆分caption中的标题与副标题
    const captions = document.querySelectorAll('.caption');
    captions.forEach(caption => {
        const fullText = caption.textContent.trim();
        const colonPos = fullText.indexOf(':');
        if (colonPos !== -1) {
            const title = fullText.slice(0, colonPos).trim();
            const subtitle = fullText.slice(colonPos + 1).trim();
            caption.innerHTML = `
                <span class="title">${title}</span>
                <span class="subtitle">${subtitle}</span>
            `;
        }
    });
});

2. 自定义CSS样式（可选） #

若要给拆分后的标题和副标题设置样式，将以下代码添加到设计 > 自定义CSS中：

/* 标题样式 */
.caption .title {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.4rem;
}

/* 副标题样式 */
.caption .subtitle {
    display: block;
    font-size: 0.95rem;
    color: #666;
    font-style: italic;
}

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