How can I color text between single quotes when apostrophes are present?

I am trying to color phrases that are in single quotations.

I tried:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

chapter = document.querySelector('#chapter');
chapter.innerHTML = chapter.innerHTML
  .replace(/'([^']*)'/g, "<span style='color:red'>$1</span");

<!-- language: lang-html -->

<div id="chapter">It's Bob's house.</div>

<!-- end snippet -->

But as you can see I don't know how to avoid cases like "it's" or "Bob's house". Also, for some reason the first ' gets removed.

You could try converting all the single-quotes in contractions to a sequence of carets, perform the highlighting, and finally reverse the carets back into single-quotes.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const chapter = document.querySelector('.chapter');

const highlightQuotes = (element, fg = 'inherit', bg = 'inherit') => {
  const style = `background:${bg};color:${fg}`;
  element.innerHTML = element.innerHTML
    .replace(/\b'\b/g, '^^^')              // Contraction e.g. don't, he's
    .replace(/(?<!'\w+)'(?= )/g, '^^^')    // Possessive  e.g. Luis'
    .replace(/\^\^\^(\w+)\^\^\^/g, "'$1'") // If both above ran, repair
    .replace(/'([^']+)'/g,  `<span style="${style}">$1</span>`)
    .replace(/\^\^\^/g, "'");              // Repair original apostrophes
};

highlightQuotes(chapter, 'red', 'yellow');

<!-- language: lang-html -->

<div class="chapter">
  <p>'He's considered lucky with that curse?!'</p>
  <p>Almost like he was trying to 'bite at Su Yang's handsome face.'</p>
  <p>'I like Luis' shirt.'</p>
  <p>'abc' def</p>
  <p>Foo's' bar</p>
</div>

<!-- end snippet -->

As Andy suggests, you can achieve the same thing with: /'(.*)'/g

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const chapter = document.querySelector('.chapter');

const highlightQuotes = (element, fg = 'inherit', bg = 'inherit') => {
  const style = `background:${bg};color:${fg}`;
  element.innerHTML = element.innerHTML
    .replace(/'(.*)'/g,  `<span style="${style}">$1</span>`)
};

highlightQuotes(chapter, 'red', 'yellow');

<!-- language: lang-html -->

<div class="chapter">
  <p>'He's considered lucky with that curse?!'</p>
  <p>Almost like he was trying to 'bite at Su Yang's handsome face.'</p>
  <p>'I like Luis' shirt.'</p>
  <p>'abc' def</p>
  <p>Foo's' bar</p>
</div>

<!-- end snippet -->