javascript - 用跨度将标题中的特定单词换行而不会丢失html格式

我正在尝试使用以下命令在所有标题内包装fubar的所有实例：

jQuery('h1, h2, h3, h4, h5, h6').each(function(){
        var located = jQuery(this).text().replace(/fubar/g,"<span class='myspan'>fubar</span>");
        jQuery(this).html(located);
    });

如果文字直接位于H标签内，例如

<h1>this is fubar</h1>

但是，如果将文本包裹在a标记内，则会删除a标记，例如

<h1><a href="#">this is fubar</a></h1>

成为：

<h1>this is <span class="myclass">fubar</span></h1>

如何保留a标签和/或其他包装元素？



编辑

有时，“ fubar”也可能位于href属性中。显然不应该替换它。例如。

<h1><a href="#/this-is-fubar">this is fubar</a></h1>

最佳答案

一种选择是find :contains(fubar)并循环遍历和更改文本的所有子级。

jQuery('h1, h2, h3, h4, h5, h6').each(function() {
    jQuery(this).find(':contains(fubar)').each(function(){
        var located = $(this).text().replace(/fubar/g, "<span class='myspan'>fubar</span>");
        $(this).html(located)
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1><a href="#">this is fubar</a></h1>