1

I expected to find an answer to a typical problem with regular expressions.

  • Find a given line
  • Change something on that line

Many examples of how to use RegEx replace assume you know the pattern you want to replace. Great for teaching but not typical (IMO). See w3 schools and MDN. If it is on the MDN page please point it out.

In my latest problem, I have an html file that has uniq IDs on a line so I can perform this simple replacement. The syntax of the lines I need modified are shown below. I can place a unique string in the file so I can find the correct line to update.

<span id="lastModified">2018-10-26</span>
<span id="builtBy">Pat</span>

I need to find the line that has id="lastModified" and change the date.

I need to find the line that has id="builtBy" and change the date.

I tried a few different things. One is 

var res = str.replace(/id="lastModified".*>(.*)<.span>/, newDate );

I thought the default might be to change the data matched in the parens (nope it doesn't work that way). See JSFiddle code example of what I tried that didn't work.

NOTE: In my case I'm trying to figure this out because for a simple string replacement using gulp-replace but it's really a javascript pattern matching and replacement problem so I'm not bring gulp-replace into this question other than to mention it.

NOTE: In my case, this code is not executing in the browser, so typical DOM manipulation will not work.

Other questions that I found (but didn't answer my question) were:

PatS
  • 8,833
  • 12
  • 57
  • 100
  • 3
    In general, better to use DOM traversal when possible instead of regex. – CertainPerformance Oct 26 '18 at 14:55
  • Also, if you want to use a regular expression, pass a regular expression to `.replace`, not a string – CertainPerformance Oct 26 '18 at 14:57
  • 1
    **(?!lastModified)[^\>]+(?=\<)** this will match the date, and then, you can change it. (Works on regex101 tho: https://regex101.com/r/kA2kAG/1) – lucas_7_94 Oct 26 '18 at 14:57
  • what's your execution environment? - describe what hosts the code need to replace the element's value (e.g. code will run inside `gulp` / `webpack` / 'browser') – Jossef Harush Kadouri Oct 26 '18 at 15:01
  • @CertainPerformance, This is part of a build process not running in browser so DOM is not available in node (using gulp). – PatS Oct 26 '18 at 15:03
  • @CertainPerformance, thanks for pointing that out. I updated my question to use the regex //, syntax instead of a string. – PatS Oct 26 '18 at 15:05
  • Here is one: https://www.npmjs.com/package/gulp-htmlparser. Another one: https://www.npmjs.com/package/gulp-dom. One for Node - https://www.npmjs.com/package/node-html-parser – Wiktor Stribiżew Oct 26 '18 at 15:45

1 Answers1

1

You can use this regex to match your first line:

/(<span id="lastModified">)(.*?)(</span>)/

It basically matches literally the text and captures it in three Groups, which is then used in the replacement pattern, which can be:

$12018-10-26$3

First it replaces with $1 (the first matched Group), then your date (which you will want to come from a variable) and finally $3 which is the end span.

Poul Bak
  • 10,450
  • 5
  • 32
  • 57
  • Thanks @Poul Bak, this is the answer I came up. So the final code is ```var res = str.replace(/()(.*?)()/, '$12018-1026$3');``` – PatS Oct 27 '18 at 20:36