Question

I have the following very simple Javascript-compatible regular expression:

<script type='text/javascript' id='(.+)' src='([^']+)'> 

I am trying to match on script tags and gather both the ID and src attributes. I’d like to make the order of the attributes irrelevant, so that the following will still match:

<script id='...' type='text/javascript' src='...'> <script src='...' id='...' type='text/javascript'> <script id='...' src='...' type='text/javascript'> 

Is it possible to allow the attributes to appear in any order without compromising its ability to collect the matching ID and src?

edit The string to match on is coming from innerHTML, making DOM traversal impossible. Also, I cannot use any third party libraries for this specific application.

Answer 1

Disclaimer: Be careful with regular expressions and HTML source code. It’s brittle and therefore easily broken or circumvented, you should not even think of using it to validate user input.

If you are sincere of the source data and know it conforms to the rules of well-formed HTML, you can use this:

var html = 'variable/property holding your html source'; var re_script = /<script\s.+?>/ig; var re_id     = /id='(.*?)'/i; var re_src    = /src='(.*?)'/i;  var scriptTag = null; while (scriptTag = re_script.exec(html)) {   var matchId  = re_id.exec(scriptTag);   var matchSrc = re_src.exec(scriptTag);    if (matchId && matchSrc)   {     var scriptId  = matchId[1];     var scriptSrc = matchSrc[1];     alert('Found script ID='' + scriptId + '', SRC='' + scriptSrc + ''');   } } 

Basically, this is what jQuery’s $('script').each() would do, just without the jQuery and without needing the DOM.