Question

Would like to use jQuery to:

1. select any punctuation marks (meaning . , ; : ' " “ ” ‘ ’ etc.) that occur directly before and after any links and then
2. wrap the punctuation marks in spans.

Hence this:

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

to become this:

<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>

(BTW, &ldquo and ” are quotation marks.)

The content in the div is not fixed. There may also be instances where there’s more than one punctuation mark adjacent to a link (as in the above, ”. to become <span>&rdquo;.</span>)

Would really appreciate any help!!

---

Sorta similar (but not quite) to this question with regards to selecting text nodes? Using jQuery, how to modify text outside of tags?

Answer 1

This seems to work:

Try it out: 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 );​

EDIT: Updated to exclude alphanumeric characters adjacent to the tags.