Making a regex in JavaScript to find the "action" attribute in the form tag and replace it

Question

I am currently making a HTML form upload system. I am trying to read the HTML file using fs.readFile then I'm attempting to replace the action attribute of the form tag with "/form/" + form._id, so that the form makes POST requests to this route.

I am having trouble making a regex to find the action attribute. This is what I have until now:

var newData = data.replace(/action(? *)=(? *)("|')(?=.*)("|')/g, 'action="/form/' + form._id + '/");

I know the regex is wrong. I really couldn't understand how it works. If you have an answer please write and explanation too if you don't mind. Thank you in advance.

Where do you try to read the HTML file and why are you reading the HTML file? To get the action of a form loaded into a page or into a container, do `container.querySelector("form").getAtttribute("action")`, where container could be `document` if there is one in the platform you are using — mplungjan, Jun 04 '20 at 17:16
https://www.npmjs.com/package/dom-parser - I do not know if it is useful - I do not do node — mplungjan, Jun 04 '20 at 20:58
This package is only used for parsing. I cannot change the HTML. — Abdullah AlJasser, Jun 04 '20 at 21:35
careful not to [summon Cthulhu](https://stackoverflow.com/a/1732454/8031815). — Garrett Motzner, Jun 04 '20 at 21:57
You use a domparser to parse HTML - feed the form to the parser and you can get the action without regex — mplungjan, Jun 05 '20 at 03:41

Józef Podlecki · Answer 1 · 2020-06-04T21:49:28.753

2

I don't think you need such complex regex for that

const path = "/form/1";

const str = `<form action="/test/1" method="POST" data-id="420"></form>`;

const result1 = str.replace(/action=\"(.*?)\"/gm, `action="${path}"`);
const result2 = str.replace(/(?<=action=\")(.*?)(?=\")/gm, path); // with positive lookbehind,lookahead


console.log(result1);
console.log(result2);

edited Jun 04 '20 at 21:49

answered Jun 04 '20 at 17:21

Józef Podlecki

10,453
5
24
50

1

this is great but if there is any other attribute like method in the form (which is crucial to the function of the form) it will remove it. Is there a way around this problem? – Abdullah AlJasser Jun 04 '20 at 20:48
Updated answer. Turned regex to non greedy – Józef Podlecki Jun 04 '20 at 21:49

score 1 · Accepted Answer · answered Jun 04 '20 at 21:46

This works for any attribute before and after the action attribute. It also makes sure the replace only happens in a form tag.

var form = {
  _id: 123
};
var path = '/test/' + form._id;
var str = '<form method="post" action="/test/1" class="foo"></form>';

var result = str.replace(/(<form [^>]*? action=["'])([^"']*)/, '$1' + path);

console.log(result);

Making a regex in JavaScript to find the "action" attribute in the form tag and replace it

2 Answers2