如何将DIV元素内的所有文本转换为SPAN元素的ID？

1. 正则匹配修正 #

你之前的正则问题出在匹配范围太宽泛，要么误命中标签，要么把DIV内的所有文本当成一个整体匹配。可以分两步精准处理：

• 先捕获<DIV>标签内的纯文本：用正则 /(?<=<DIV>)([\w\s]+)(?=<\/DIV>)/，这个规则只会匹配DIV开标签和闭标签之间的单词与空格，不会触碰到标签本身。
• 再将捕获到的文本按空格拆分，得到单个单词，避免整体匹配的问题。

2. jQuery包裹实现（保留ID+单独处理类元素） #

要解决.Something类元素重复操作的问题，直接遍历每个类元素单独处理即可，无需临时占位符：

// 遍历每个.Something元素，单独处理内部文本
$('.Something').each(function() {
  const $currentDiv = $(this);
  // 提取文本并拆分为单词数组
  const wordList = $currentDiv.text().trim().split(/\s+/);
  // 清空原内容，重新构建结构
  $currentDiv.empty();
  wordList.forEach(word => {
    // 创建带对应ID的SPAN并追加到当前DIV
    $('<span>', { id: word }).appendTo($currentDiv);
  });
});

这段代码会逐个处理每个.Something元素，不会出现跨元素的重复操作，也避免了占位符导致的匹配错误。

3. 自动生成CSS规则 #

可以通过遍历生成的SPAN元素，动态构建CSS并插入页面：

let cssContent = '';
$('.Something span').each(function() {
  const spanId = $(this).attr('id');
  // 生成对应ID的背景图规则，图片名转为小写
  cssContent += `#${spanId} { background-image: url('${spanId.toLowerCase()}.png'); }\n`;
});
// 将生成的CSS插入到页面头部
$('<style>').text(cssContent).appendTo('head');

最终效果 #

处理后的HTML结构：

<DIV class="Something"><SPAN id="One"></SPAN><SPAN id="Two"></SPAN><SPAN id="Three"></SPAN></DIV>

自动生成的CSS：

#One { background-image: url('one.png'); }
#Two { background-image: url('two.png'); }
#Three { background-image: url('three.png'); }

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