Question

我有一个网站，注册商标符号“®”被大量使用。此符号的渲染大小与周围文本的大小相同。由于我需要它来显示较小的和上标的，我使用jQuery在页面上查找“®”的所有实例并将其替换为“<span class="reg-mark">®</span>”。这样我就可以设置该角色的显示样式。

我使用以下代码进行搜索和替换：

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        var strNewString = $('body').html().replace(/®/g,'<span class=\"reg-mark\">®</span>');
        $('body').html(strNewString);
    });
</script>

这成功地取代了所有“®”实例，以便我可以按照我想要的方式设置它们。

但是，它还会替换标签“alt”属性中的“®”实例，这会打破图像的显示。

有没有办法在跳过属性值时完成此搜索和替换？

谢谢， PJ

Answer 1

$('div, p, a, h1, h2, h3').filter(":contains('®')").each(function(){
    $(this).html($(this).html().replace('®', '<span class="reg-mark">®</span>'));
});

<强> DEMO

Answer 2

我会选择一个需要®在尖括号之间的RegExp

e.G。：/（＆gt; [^＆lt;] ）®（[^＆lt;] ＆lt;）/

然后你可以将第1部分，新插入和第3部分连接到新匹配。

然而，这仅匹配HTML括号之间的出现。如果您想匹配任何类型的属性中的文本，这将无效。

Answer 3

使用JQuery not selector。例如，只需在<img>标记上“不”。 http://api.jquery.com/not-selector/

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        var strNewString = $('body:not(img)').html().replace(/®/g,'<span class=\"reg-mark\">®</span>');
        $('body').html(strNewString);
    });
</script>

Answer 4

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        var strNewString = $('body:not(img)').html().replace(/®/g,'<span class=\"reg-mark\">®</span>');
        $('body').html(strNewString);
    });
</script>

我认为会这样做。它应该在BODY中找到所有“@”，但跳过任何IMG标签。还有一些选择器可以让您专注于ALT标签。 e.g：

$('img[alt="@"]')

使用jQuery替换文本中断图像

4 个答案: