I'm trying to isolate a certain letter, v, in a case title by surrounding it with a <span> tag. This single character word has always space around it, yet I've tried to do it via word boundary match in regex: \b

(function() {
  let title = document.querySelector("h1>a");

  let a = title.innerHTML;

  let b = a.match(/\b[v]\b/i);

  console.log(b);

  title.innerHTML = a.replace(b, '<span>\1</span>');
})();

span {
  text-transform: lowercase;
  color: black;
  background-color: red;
}

<h1>
  <a href="http://example.com/"> Viva v Vanuatu</a>
</h1>

However, the above code won't work. It doesn't select an isolated v character and matches any v character it finds first.

I want it to be like this:

<h1>
  <a href="http://example.com/"> Viva <span>v</span> Vanuatu</a>
</h1>

No jquery please.