将DIV元素中的所有单词转换为SPAN元素的id

Question

我要做的是把这个:

<DIV>One Two Three</DIV>

这:

HTML

<DIV><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'); }

我有几个问题。首先，我知道RegEx命令:

bw(.*?)+b

将挑选字符串中的每个单词，但它无意中将DIV的每个实例都转换为匹配。我尝试使用正查找，以便DIV不被拾取:

(?<=>)bw(.*?)+b(?=<)

但结果是变成了"一二三";形成统一的匹配。

其次，我有这个jQuery代码，将我的匹配条件转换为SPAN id。

$("DIV").each(function() {
$(this).html($(this).html().replace(/bw(.*?)+b/gi, "<SPAN id="$0"></SPAN>"));
});

但是后来我发现Alex Turpin的答案是在SPAN标签中包装元素的每个单词，并想应用它。它几乎可以工作:我能够为字符串中的每个单词提供一个SPAN元素，但它不会保留id参数。我还缺什么才能让这一切顺利进行?

Anant在评论部分提供了一个很有前途的解决方案。在我的测试过程中，我遇到了一个奇怪的bug，它捡起了一个占位符字符串的所有实例，这个字符串是作为个人提醒，稍后要替换单词。它们是这样的:

<DIV>
<DIV class="Something">One Two Three</DIV></DIV>
<DIV>
<DIV class="Something">TEMP</DIV></DIV>
<DIV>
<DIV class="Something">TEMP</DIV></DIV>

当代码被应用时，它变成了这样:

<DIV>
<DIV class="Something"><SPAN style="background-image: url(one.png)"></SPAN><SPAN style="background-image: url(two.png)"></SPAN><SPAN style="background-image: url(threeTEMPTEMP.png)"></SPAN></DIV></DIV>
<DIV>
<DIV class="Something"><SPAN style="background-image: url(one.png)"></SPAN><SPAN style="background-image: url(two.png)"></SPAN><SPAN style="background-image: url(threeTEMPTEMP.png)"></SPAN></DIV></DIV>
<DIV>
<DIV class="Something"><SPAN style="background-image: url(one.png)"></SPAN><SPAN style="background-image: url(two.png)"></SPAN><SPAN style="background-image: url(threeTEMPTEMP.png)"></SPAN></DIV></DIV>

这个bug是通过简单地从HTML中删除单词TEMP的所有痕迹来解决的。您还会注意到代码在每个Something类中复制自己。剩下要做的就是让代码单独获取Something类的每个实例。

Answer 1

在您想要进行替换工作的div中应用一个额外的类:

检查下面的代码片段:

$('div.modify-html').each(function() {
var obj = $(this);
var words = obj.text().split(" ");
obj.empty();
$.each(words, function(i, v) {
var imgSrc = v.toLowerCase() + ".png";
obj.append($("<span style='background-image: url(" + imgSrc + ");'>").text(v));
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="something modify-html">One Two Three</div>
</div>
<div>
<div class="something">TEMP</div>
</div>
<div>
<div class="something">TEMP</div>
</div>
<div>
<div class="something modify-html">Four Five Six</div>
</div>

Answer 2

您缺少一个工作的正则表达式:

S   # Match           non-whitespace characters.
+    #       1 or more

另外，您的替换字符串应该使用$&而不是$0:

<span id="$&"></span>

在regex101.com上试试。

这是你当前的正则表达式的工作方式:

b      # Match a word boundary
w      # then a word character ('a' to 'z', lower or uppercase, '-', or a digit),
(       # then           groups, each consists of
.*?   #                                         0 or more characters,
)+      #      1 or more
b      # then ends with another word boundary.

在regex101.com上试试，看看它们之间的区别。

试一试:

$('div').each(function() {
const currentHTML = $(this).html();
const newHTML = currentHTML.replace(
/S+/g,
'<span id="$&"></span>'
);

console.log(currentHTML);
console.log(newHTML);

$(this).html(newHTML);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>One Two Three</div>