0

I'm trying to highlight vowels for a simple reading aid website.

I have some HTML and want to highlight vowels, but there's also some HTML that I don't want to mess with. Basically only just <mark data-trigger="">other word</mark>

To clarify.

I have this:

Hello, this is a <mark data-trigger="">word</mark> that is in the text. I 
want to get all vowels and wrap it in spans, but avoid messing with the other 
html.

I want this:

H<span>e</span>ll<span>o</span>, th<span>i</span>s <span>i</span>s a <mark data-trigger="">word</mark> th<span>a</span>t...

I know this replaces all vowels > replace(/(a|e|i|o|u)/ig, "<span class='vowel'>$1</span>")

It would be enough to add "don't mess with anything inside MARK tags"

Can I achieve this using RegExp?

I can use external libraries, jQuery or whatever.

Ignacio
  • 7,947
  • 15
  • 63
  • 74
  • 2
    Have you read http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454 ??? – ashawley May 13 '17 at 23:36
  • 1
    Given that sample, can you show what the expected result would be? Also: '*It would be enough to add "don't mess with anything inside s"*' - what is 's'? – David Thomas May 13 '17 at 23:51
  • 1
    What is the input string? – guest271314 May 14 '17 at 00:17
  • 1
    @ashawley Hey! Thanks, I think I was aware that you cannot parse html with regex, but this is really a small amount of tags and different strings going in there. Also, I can use external libraries or other solutions, Regex was just what came to mind. – Ignacio May 14 '17 at 14:10
  • @DavidThomas Sorry, editor messed with my html tags. I meant I wanted to keep the regex from matching inside the MARK html tags. I also added sample and expected result. – Ignacio May 14 '17 at 14:12

1 Answers1

0

This should capture all vowels not included in the html tags and not inside of the tags as well.

/(a|e|i|o|u)|(?:<.*?>.*<\/.*?>)/g

If you did want to capture the text inside the html tags it would be this.

/(a|e|i|o|u)|(?:<.*?>)/g

Thomas Powell
  • 115
  • 1
  • 12
  • This assumes the HTML only contains inline elements and no nested elements? For example, `

    Tags inside other tags

    `     – ashawley May 14 '17 at 00:49
  • Hey! I think this matches also stuff inside the tags. I've tried it in code and here http://www.regextester.com/15 and it gets text inside the marks :/ – Ignacio May 14 '17 at 14:07
  • The top solution ignores html tags and their contents. https://regex101.com/r/sDB3TX/1 – Thomas Powell May 14 '17 at 21:58