我正在尝试使用以下方法将 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>
最佳答案
使用 html()
获取元素的内部 HTML 并替换其中的出现:
$('h1, h2, h3, h4, h5, h6').each(function() {
var located = $(this).html().replace(/fubar/g, "<span class='myspan'>fubar</span>");
$(this).html(located);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><a href="#">this is fubar</a></h1>
关于javascript - 在不丢失 html 格式的情况下将特定单词包装在带有跨度的标题中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50046128/