Keeping apostrophes in the text

Question

I have the following function in my JS

var p = $('.page p');
    p.html(function(index, oldHtml) {
        return oldHtml.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>')
    });

This breaks up every word of paragraph. However words that have apostrophes (e.g don't, craig's) get split up to two part (e.g don and t)

How can I amend the code to make these complete words and keep in the apostrophe?

Thanks

FYI, you don't want to run such search/replace operations on the inner HTML of the element. It will affect any existing markup as well. Instead, you want to apply this to the inner *text* of the element. — Felix Kling, Mar 06 '15 at 10:16
possible duplicate of [Regex to match words and those with an apostrophe](http://stackoverflow.com/questions/2596893/regex-to-match-words-and-those-with-an-apostrophe) — Joe Fitter, Mar 06 '15 at 10:16

JLRishe · Accepted Answer · 2015-03-06T16:03:12.790

1

Have you tried:

var p = $('.page p');

p.html(function(index, oldHtml) {
  console.log(oldHtml);
  return oldHtml.replace(/([\w']+)/g, '<span class="word">$1</span>');
  
});

.word {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page">
  <p>I'm so happy that I can't stop jumping up and down.</p>
  </div>

edited Mar 06 '15 at 16:03

answered Mar 06 '15 at 10:17

JLRishe

99,490
19
131
169

Unfortunatley this doesn't change anything – Craig Powell Mar 06 '15 at 15:20

Tom Dyer · Answer 2 · 2015-03-06T23:10:02.897

If you want to simply break a string into words, you could just split at the space and then join again...

$('.page p').each(function(){
  var p = $(this);
  var t = '<span class="word">' 
        + p.html().split(' ').join('</span> <span class="word">')
        + '</span>';
  p.html(t);
});

It depends what types of strings you're going to be dealing with of course, but this should be basic enough for a lot of circumstances.

Keeping apostrophes in the text

2 Answers2