jQuery如何交换“&”的每个实例将 <span> 标签附加到每个元素

Question

正如标题所说，

我希望能够在页面加载时搜索位于 #wrapper 中的文本。

如果有一个“&”，我希望它有一个 span 标签应用于它，并附加一个类到 span。 IE： 如果找到“hello & Welcome” 它最终应该像“hello <span class="amp">&</span> Welcome”。

我确实有一些我一直在尝试的代码，但都没有工作，所以包含它毫无意义。 任何帮助都会非常感谢。

编辑：一直在与

合作

<script type="text/javascript">  
    $(document).ready(function() { 
     $("#wrapper").html( $("#wrapper").html().replace(/&amp;/g, '<span class="amp">&amp;<"+"/span>') ); 
    }); 
</script>

这会在萤火虫中加载一个错误，告诉我它不是一个函数：

$ 不是函数 $(document).ready(function() {

编辑：哎呀忘了包括我对 jQuery 的引用..

这行得通。

<script type="text/javascript">  
    $(document).ready(function() { 
       $("#wrapper").html( $("#wrapper").html().replace(/&amp;/g, '<span class="amp">&amp;<"+"/span>') ); 
    }); 
</script>

Answer 1

你看过jquery.highlight吗？似乎它可以满足您的需求 - 正确的方式（仅在文本节点等中搜索）

$("#wrapper").highlight('&');

进一步的解释。想象以下场景：

 <div id='wrapper'>This &amp; should become highlighted.  
    And a picture: <img src='momanddad.jpg' alt='Mom &amp; Dad' /></div>

一揽子正则表达式替换将捕获这两个 & 出现并返回：

 <div id='wrapper'>This <span class="amp">&amp;</span> should become highlighted.  
    And a picture: <img src='momanddad.jpg' alt='Mom <span class="amp">&amp;</span> Dad' /></div>

这显然会破坏您的 img 标签。 jquery highlight 插件会避免这种情况。

Answer 2

为了便于阅读，我会重新考虑；

var html = $("#wrapper").text().replace(/&/g,'<span class="amp">&</span>');
$("#wrapper").html(html);

虽然我认为这是对 DOM 的额外调用。