Поиск и замена атрибута в файле HTML

У меня есть папка проекта, которая содержит список файлов HTML, содержащих некоторый синтаксис нокаута, я ищу указатель, где я ищу определенный шаблон атрибута и заменяю его новым синтаксисом.

Я пробовал что-то с JSDOM, но безуспешно.

Структура HTML-файла примерно такая: здесь я нашел все вхождения data-bind="attr:{id: <>}" и заменил их на:id="[[componentid]]"

    <div data-bind = "attr :{id :componentid}" class = "">
      <div class = "formlayout">
        <input type='textbox>
      </div>
    </div>
   <div data-bind = " attr :{id :  pageid}" class = "">
      <div class = "formlayout">
        <input type='textbox>
      </div>
    </div>

После изменения HTML-файл должен выглядеть так, как показано ниже.

<div :id = "[[componentid]]" class = "">
      <div class = "formlayout">
        <input type='textbox>
      </div>
    </div>
   <div :id = "[[pageid]]" class = "">
      <div class = "formlayout">
        <input type='textbox>
      </div>
    </div>

Примечание. Для свойства привязки данных может быть несколько пробелов, которые следует игнорировать. Я пытался использовать JSDOM и node js, но безуспешно, и указатель будет очень полезен.