jQuery 正则表达式不显示更新

Question

我创建了一个 jQuery sn-p，但在动态显示结果时遇到了一些问题。每个 H2 标签内都有一个图像。下面是我想要完成的脚本：

<h2 id="test">This is a test <img class="test" src="https://www.iconsdb.com/icons/preview/red/new-xxl.png" alt="test" width="31" height="16" /></h2>

还有我的 jQuery：

$('h2 img').each(function(){
var = test $(this).html();
$(this).html(test.replace(/<h2>(.*?)\s<img[^>]+src="([^">]+)(.*)\/><\/h2>/gi, '<h2>$1<img class="test" src="https://www.iconsdb.com/icons/preview/red/new-xxl.png" alt="test" width="31" height="16" /></h2>'));
]);

它应该将图像移动到单词 test 旁边（根据我的正则表达式删除单词 test 和 img 标签之间的额外空格）。

输出应该如下所示（注意：图像标签在单词 test 旁边）：

<h2 id="test">This is a test<img class="test" src="https://www.iconsdb.com/icons/preview/red/new-xxl.png" alt="test" width="31" height="16" /></h2>

我正在尝试动态地完成此操作。任何帮助表示赞赏。

Answer 1

如果您的目标是删除单词 'test' 之后的空格，那么您可以直接修改文本节点，而不是将 HTML 作为字符串修改：

let nodes = $('h2').contents().filter((i, node) => node.nodeType === 3);
Array.from(nodes).forEach(n => n.nodeValue = n.nodeValue.trim());

h2 img {
  width: 31px;
  height: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h2>This is a test <img class="test" src="https://www.iconsdb.com/icons/preview/red/new-xxl.png" alt="test" /></h2>
<h2>This is another test <img class="test" src="https://www.iconsdb.com/icons/preview/red/new-xxl.png" alt="test" /></h2>
<h2>foo bar <img class="test" src="https://www.iconsdb.com/icons/preview/red/new-xxl.png" alt="test" /></h2>

更好的是，从源头解决问题，不要依赖 JS 作为解决标记问题的拐杖。

-- 更新--

最后一件事可以将其转换为常规函数而不是箭头函数吗？ ——

let nodes = $('h2').contents().filter(function(i, node) {
  return node.nodeType === 3;
});
Array.from(nodes).forEach(function(n) {
  return n.nodeValue = n.nodeValue.trim();
});