Replace HTML tag with string that contains tag attribute

Question

consider this string:

the quick&nbsp;<input type="button" disabled="" value="brown.fox" />&nbsp;jumps over the&nbsp;<input type="button" disabled="" value="lazy.dog" />

I would like to replace every occurrence of the <input type="button" tag with a string that contains the value attribute of the tag, specifically with this string ${}

So the end result should be

the quick&nbsp;${brown.fox}&nbsp;jumps over the&nbsp;${lazy.dog}

What is the hard part? Getting the inputs? Getting the input values? Replacing the inputs? Something else? — Teemu, Oct 31 '21 at 19:42
@Teemu mostly finding a Regex that will extract the value attribute and will also replace the entire tag in a single expression. — baba-dev, Oct 31 '21 at 19:44
There's probably a [good reason](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454) you can't "find a regex" to do that. — Niet the Dark Absol, Oct 31 '21 at 19:44
Why do you want to use a RegExp instead of using the DOM corresponding to the given HTML. — t.niese, Oct 31 '21 at 19:47
@NiettheDarkAbsol in my case it's a representation of an HTML tag within a string, it's not an actual DOM element, therefore I believe that it is replaceable by Regex — baba-dev, Oct 31 '21 at 19:50
@t.niese see my above answer - it's not a DOM element but a string — baba-dev, Oct 31 '21 at 19:51
It could be, but why to build your own HTML parser, when you already have an excellent parser in the browser? — Teemu, Oct 31 '21 at 19:51
i have updated my ans and it now gives exact string that you shared as result — Nabeel Khan, Oct 31 '21 at 19:59
Using RegExp to replace parts of HTML especially if it is about respecting the syntax of tags is not reliable. While a certain RegExp might seemingly work you most certainly forgot about a specific edge case. You really shouldn’t wast you time with that and instead utilize a HTML parser for that purpose. Otherwise you will later have problems figuring out why you - out of sudden - get incorrect results. — t.niese, Oct 31 '21 at 20:07

score 2 · Accepted Answer · answered Oct 31 '21 at 19:51

2

As you are in JavaScript, you have a DOM parser at your fingertips. Use it!

const input = `the quick&nbsp;<input type="button" disabled="" value="brown.fox" />&nbsp;jumps over the&nbsp;<input type="button" disabled="" value="lazy.dog" />`;
const container = document.createElement('div');
container.innerHTML = input;
const buttons = container.querySelectorAll("input[type=button]");
buttons.forEach(button=>{
  button.replaceWith("${"+button.value+"}");
});
const output = container.innerHTML;

answered Oct 31 '21 at 19:51

Niet the Dark Absol

320,036
81
464
592

I have marked this as the accepted answer but Clyde Lobo and Nabeel Khan answers will also work if you prefer to go with the RegExp way. – baba-dev Oct 31 '21 at 20:13
What if I want to replace to a html tag rather than a string – Alston Oct 23 '22 at 10:30

score 0 · Answer 2 · answered Oct 31 '21 at 19:52

0

let text = 'the quick&nbsp;<input type="button" disabled="" value="brown.fox" />&nbsp;jumps over the&nbsp;<input type="button" disabled="" value="lazy.dog" />';

text = text.replace(/<input[^>]*value\s*=\s*["'](.+?)["']\s*[^>]*>/g,"${$1}")

answered Oct 31 '21 at 19:52

Clyde Lobo

9,126
7
34
61

score 0 · Answer 3 · answered Oct 31 '21 at 19:56

You need to use regex for this.

This code should work:

a = 'the quick&nbsp;<input type="button" disabled="" value="brown.fox" />&nbsp;jumps over the&nbsp;<input type="button" disabled="" value="lazy.dog" />'

pattern = /<input type=\"button\".*?value=\"([^\"]+)\" \/>/gm

matches = a.matchAll(pattern);
    
for (const match of matches) {
  a = a.replace(match[0], "${" + match[1] + "}")
}

console.log(a)

Replace HTML tag with string that contains tag attribute

3 Answers3

Linked