Question

I have several posts on a website; all these posts are chat conversations of this type:

AD: Hey!
BC: What’s up?
AD: Nothing
BC: Okay

They’re marked up as simple paragraphs surrounded by <p> tags.

Using the javascript replace function, I want all instances of “AD” in the beginning of a conversation (ie, all instances of “AD” at the starting of a line followed by a “:”) to be surrounded by <strong> tags, but only if the instance isn’t already surrounded by a <strong> tag.

What regex should I use to accomplish this? Am I trying to do what this advises against?

The code I’m using is like this:

var posts = document.getElementsByClassName('entry-content');

for (var i = 0; i < posts.length; i++) {
    posts[i].innerHTML = posts[i].innerHTML.replace(/some regex here/,
    'replaced content here');
}

Answer 1

If AD: is always at the start of a line then the following regex should work, using the m switch:

.replace(/^AD:/gm, "<strong>AD:</strong>");

You don’t need to check for the existence of <strong> because ^ will match the start of the line and the regex will only match if the sequence of characters that follows the start of the line are AD:.

You’re not going against the “Don’t use regex to parse HTML” advice because you’re not parsing HTML, you’re simply replacing a string with another string.

An alternative to regex would be to work with ranges, creating a range selecting the text and then using execCommand to make the text bold. However, I think this would be much more difficult and you would likely face differences in browser implementations. The regex way should be enough.

---

After seeing your comment, the following regex would work fine:

.replace(/<(p|br)>AD:/gm, "<$1><strong>AD:</strong>");