Note that there are some explanatory texts on larger screens.

plurals
  1. POSelect punctuation marks directly adjacent to links, wrap them in spans
    text
    copied!<p>Would like to use jQuery to:</p> <ol> <li>select any punctuation marks (meaning <code>.</code> <code>,</code> <code>;</code> <code>:</code> <code>'</code> <code>"</code> <code>&amp;ldquo;</code> <code>&amp;rdquo;</code> <code>&amp;lsquo;</code> <code>&amp;rsquo;</code> etc.) that occur directly before and after any links and then</li> <li>wrap the punctuation marks in <code>span</code>s.</li> </ol> <p>Hence this:</p> <pre><code>&lt;div id="mydiv"&gt; Lorem ipsum &lt;a href="#"&gt;dolor sit amet&lt;/a&gt;, consectetur &amp;ldquo;&lt;a href="#"&gt;adipisicing elit&lt;/a&gt;&amp;rdquo;. &lt;/div&gt; </code></pre> <p>to become this:</p> <pre><code>&lt;div id="mydiv"&gt; Lorem ipsum &lt;a href="#"&gt;dolor sit amet&lt;/a&gt;&lt;span&gt;,&lt;/span&gt; consectetur &lt;span&gt;&amp;ldquo;&lt;/span&gt;&lt;a href="#"&gt;adipisicing elit&lt;/a&gt;&lt;span&gt;&amp;rdquo;.&lt;/span&gt; &lt;/div&gt; </code></pre> <p>(BTW, <code>&amp;ldquo</code> and <code>&amp;rdquo;</code> are quotation marks.)</p> <p>The content in the <code>div</code> is not fixed. There may also be instances where there's <em>more than one punctuation mark adjacent to a link</em> (as in the above, <code>&amp;rdquo;.</code> to become <code>&lt;span&gt;&amp;rdquo;.&lt;/span&gt;</code>)</p> <p>Would really appreciate any help!!</p> <hr> <p>Sorta similar (but not quite) to this question with regards to selecting text nodes? <a href="https://stackoverflow.com/questions/2742223/using-jquery-how-to-modify-text-outside-of-tags/2742348#2742348">Using jQuery, how to modify text outside of tags?</a></p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload