RegEx заменяет <div foo> на <div data-foo>

В настоящее время я изучаю, как использовать RegEx. Я не смог найти учебник (или не знал, где искать) для замены результата на предыдущий контент.

Мне удалось получить регулярное выражение для извлечения foo и bar

<div foo bar=""></div>

Я хочу получить:

<div data-foo data-bar=""></div>

Вот как я пытаюсь это сделать:

str = str.replace(/[^<div ][^/div]\w+/g, 'data-$1');

Однако $ 1 не заменяется на foo и bar.

Кто-нибудь может мне помочь? Я застрял здесь!

Большое спасибо!