javascript - 选择与链接直接相邻的标点符号，将其包裹在跨度中

想要使用jQuery来:

选择在任何链接之前和之后直接出现的任何标点符号(意思是. , ; : ' " “ ” ‘ ’等)，然后是

将标点符号包装在span中。

因此:

<div id="mydiv">
  Lorem ipsum
  <a href="#">dolor sit amet</a>,
  consectetur
  &ldquo;<a href="#">adipisicing elit</a>&rdquo;.
</div>

成为这样:

<div id="mydiv">
  Lorem ipsum
  <a href="#">dolor sit amet</a><span>,</span>
  consectetur
  <span>&ldquo;</span><a href="#">adipisicing elit</a><span>&rdquo;.</span>
</div>

(顺便说一句，&ldquo和”是引号。)
div中的内容不固定。在某些情况下，链接附近可能还有多个标点符号(如上所示，”.变为<span>&rdquo;.</span>)

非常感谢任何帮助!

在选择文本节点方面，是否与这个问题类似(但不太完全)？ Using jQuery, how to modify text outside of tags?

最佳答案

这似乎可行:

试用: http://jsfiddle.net/GutKg/1/

var $div = $('#mydiv');

var html = $div.html();

html = html.replace(/([^\s\w]+)<a/g, '<span>$1</span><a')
           .replace(/<\/a>([^\s\w]+)/g, '</a><span>$1</span>');

$div.html( html );​

编辑:已更新，以排除标签旁边的字母数字字符。