0

I have the following html code:

<input id="buttonClickOne" type="button" value="Click 1" @click="buttonOneClicked">

In my script I have a regular expression to pull the @click name and its value:

let arrEvents = source.match(/ @click="([^"]*)"/g);

I get the output that I'm expecting:

[" @click="buttonOneClicked""]

So I modified the reg exp so that I can have different events I may want to search for:

const arrEventTypes = ['@click'];
for(let event_type of arrEventTypes){
    let reg = new RegExp(' ' + event_type + '="([^"]*)"', 'g');
    let arrEvents = reg.exec(source);
    ...
}

But my output is different:

[" @click="buttonOneClicked"", "buttonOneClicked"]

If I look at the RegExp that I create it looks correct: 

" @click="([^"]*)""

Am I missing something?

Solution

Thanks for the link. It makes more sense now. I started the expression version while I was coding but Touffy made a good point about using the DOMParser which actually worked better for my needs.

adviner
  • 3,295
  • 10
  • 35
  • 64
  • 2
    [You can't parse HTML with regex!](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454). Use a DOMParser instead then you can use `getAttribute("@click")`. – Touffy Jan 08 '18 at 19:12
  • 3
    you're using `match` in the first one and `exec` in the second – jdubjdub Jan 08 '18 at 19:12
  • 1
    @Touffy For some tasks, it is OK. The question you linked to was asking for a generic way to handle all HTML cases (that would not work). The OP just wants this specific syntax. – Ruan Mendes Jan 08 '18 at 19:41
  • @JuanMendes I assume the OP simplified his example to better illustrate the specific problem with `exec`. He probably wants to parse a whole component's HTML for those Vue-like event attributes. – Touffy Jan 09 '18 at 09:28

1 Answers1

0

I'm repeating myself about this issue, but let's have a go at it one more time.

First, the browser is very good at parsing HTML. Parsing HTML is its primary feature. So, let the browser do its job:

source = `<input id="buttonClickOne" type="button" value="Click 1" @click="buttonOneClicked">`
dom = new DOMParser().parseFromString(source, 'text/html')

Now you have a fully parsed object which supports all the nice DOM features you're used to (I hope) such as:

dom.body.firstElementChild.getAttribute('@click')
// returns "buttonOneClicked"

I know, it may look like a slight overkill in your example, but it's not that expensive and I assume your example is simplified anyway.

Touffy
  • 6,309
  • 22
  • 28
  • What if this is being run server side, or in a web worker? The question is really about getting multiple matches from a regex. – Ruan Mendes Jan 08 '18 at 19:43
  • Yes, I know I'm solving the problem without answering the question. I couldn't fit all that in a comment though. Web Workers and node.js do make regexes more attractive but [there are DOM libraries](https://github.com/w3c/ServiceWorker/issues/846) to replace DOMParser there. – Touffy Jan 09 '18 at 09:37