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

6l7fqoea 于 2023-04-13 发布在其他

关注(0)|答案(2)|浏览(119)

我想做的是把这个

<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命令：

\b\w(.*?)+\b

将提取字符串中的每个单词，但它无意中将DIV的每个示例都转换为匹配。我尝试使用正向查找，以便不提取DIV：

(?<=>)\b\w(.*?)+\b(?=<)

但结果是把“一二三”变成了统一的比赛。
其次，我有这个jQuery代码，它将把我的匹配条件转换为SPAN ID。

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

但后来我发现了Alex Turpin对wrapping each word of an element inside a SPAN tag的回答，并想应用它。它几乎成功了：我可以给予字符串中的每个单词一个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类的每个示例。

regex

来源：https://stackoverflow.com/questions/75991373/turn-all-words-inside-a-div-element-into-ids-for-span-element

2条答案

按热度按时间

krcsximq1#

将一个额外的类应用到您想要执行替换工作的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>

赞(0）回复(0）举报 2023-04-13

t30tvxxf2#

您缺少一个有效的正则表达式：

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

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

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

试试看on 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.

试试on 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>

赞(0）回复(0）举报 2023-04-13

我来回答

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

2条答案

相关问题

热门标签

最新问答