抓取文本，拆分它，并更改HTML以反映您所需的标题/副标题标记。

document.querySelectorAll('.caption').forEach((caption) => {
  const [title, subtitle] = caption.textContent.trim().split(/\s*:\s*/);
  caption.innerHTML = `
    <span class="title">${title}</span>
    <span class="subtitle">${subtitle}</span>
  `;
});

.caption { color: blue; }

.title { font-weight: bold; }
.subtitle { font-style: italic; }

.title:after { content: ':'; } /* optional */

<img src="http://placekitten.com/100/40" alt="image1" />
<div class="caption">IMAGE 1 TITLE: Subtitle</div>
<img src="http://placekitten.com/80/60" alt="image2" />
<div class="caption">IMAGE 2 TITLE: Subtitle</div>

该脚本使用document.querySelectorAll('.caption')选择页面上的所有标题，循环遍历每个标题，然后使用冒号分隔符将标题的文本内容拆分为title和subtitle。然后创建一个新的HTML字符串，将title和subtitle Package 在具有适当类的标记中，并使用caption.innerHTML将原始标题HTML替换为新的HTML。

// Get all the captions
var captions = document.querySelectorAll('.caption');

// Loop through each caption
captions.forEach(function(caption) {
  // Get the text content of the caption
  var captionText = caption.textContent;

  // Split the text into title and subtitle using the colon separator
  var titleSubtitleArray = captionText.split(':');
  var title = titleSubtitleArray[0];
  var subtitle = titleSubtitleArray[1].trim();

  // Replace the original caption HTML with the new HTML
  caption.innerHTML = '<span class="title">' + title + '</span><span class="subtitle">' + subtitle + '</span>';
});