0

I work for a company where I develop an Angular application. A component library internal to the company I work for has released some changes to the HTML markup format. For example, in the the previous version this was valid:

<component-name directive some-other-attribute="" *ngIf=" etc></component-name>

However, the maintainers of this library have released an update that changes the structure to this:

<directive><component-name some-other-attribute *ngIf="" etc></component-name></directive>

Essentially, what was originally the directive has been made a component in it's own right.

The application I work on has 100s of these occurrences, and going through them all and doing this is extremely tedious work and will take many hours. Is there a regular expression where I can match the first part of the original string (<component-name directive), ignore every thing else, until it reaches the closing tags, and replace then the starting and closing tags with with <directive><component-name [everything else]></component-name></directive>. It has to be done this way as there are some instances where <component-name> is used without the directive and I do not want those instances to have </directive> closing tags.

I use WebStorm as my IDE, so can use any of the refactoring/find and replace functions in there, although am open to any Terminal tool which will do the job.

While I know Regex is not supposed to be used for anything to do with HTML, I'm unsure what else I would use (obviously, suggestions/solutions welcome). I have already tried some Regular Expressions (I'm pretty rubbish at these), such as:

<component-name directive [^.*(?=>)]<\/component-name>

Here I am trying to match the first part, and ignore everything up until the closing tags. However, I'm unsure how I would substitute the new text for the matches (although am aware I could use WebStorm find-and-replace with regex to maybe do this). However, this didn't quite work.

To summarise: I need <component-name directive [other attributes ignored]></component-name> to be replaced with <directive><component-name [other attributes ignored]></component-name></directive>.

EDIT: while I realise this isn't really programming, I'm not sure where-else I would post it. I've added the WebStorm tag and removed the Angular one, but I'm open to using any other tool to get the job done.

Tom Oakley
  • 6,065
  • 11
  • 44
  • 73
  • This could be a programming question if you have access to the files you want to edit through some command line. In that case, you can write a very little script (perhaps only one line of programming), better with tools that handle XML format files, that you can launch from the command line interface (CLI). So, to do the job in this way, you have to provide next information: which kind of access do you have on the files you want to correct? And is it a Unix/Linux/Mac like system? – Pierre François Feb 13 '18 at 10:56
  • @PierreFrançois I have full access to the files, I'm on a Mac. Thanks for the suggestion, will look into that – Tom Oakley Feb 13 '18 at 11:00
  • I just tried something from the command line, but I see it will be difficult, with xml tools because the attribute directive without value gives an attributes construct error. – Pierre François Feb 13 '18 at 11:43
  • You may try **Structural Search and Replace** .. but I have no personal experience with this (how properly it's implemented in WebStorm etc). https://www.jetbrains.com/help/webstorm/structural-search-and-replace.html – LazyOne Feb 13 '18 at 12:11

1 Answers1

0

First backup all the html files you are going to process, just in case!

Normally, sed will be available at the command line prompt on a Mac.

So try this, assuming all the files you want to edit are in the same directory and have an html extension in their name, and assuming the opening and closing tag of <component-name> are on the same line:

sed -i 's/\(<component-name \)directive \([^<]*<\/component-name>\)/<directive>\1\2<\/directive>/' *.html
Pierre François
  • 5,850
  • 1
  • 17
  • 38
  • Thanks Pierre. The command worked, but I had to use `find` as well to loop through the files in my directory. So the eventual command was: `find . -type f -exec gsed -i 's/\(\)/\1\2<\/directive>/' {} \;` Also, you'll see I used `gsed` instead of `sed` - this is because `sed` on macOS uses the BSD version, which has some issues. `brew install gsed` installs the GNU version which is easier to use. – Tom Oakley Feb 13 '18 at 13:53