Finding and replacing attribute in HTML File

Question

I have a project folder which contain list of HTML file which contain some knockout syntax , I am looking some pointer where are I search for certain pattern of attribute and replace it will new syntax.

I tried something with JSDOM but was not successful.

Structure of HTML file is something like this , here I have find all occurrences of data-bind="attr :{id : <>}" and replace it with :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>

After the change HTML file should look like below.

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

Note: There can be multiple whitespace for the data-bind property we should ignore those. I was trying with JSDOM and node js but was not successful and pointer will be really helpful

Answer 1

you can try this...

<script>
  const getElement1 = document.querySelector(".data1");
  const getElement2 = document.querySelector(".data2");

  getElement1.removeAttribute("data-bind");
  getElement1.setAttribute(":id", "[[componentid]]");

  getElement2.removeAttribute("data-bind");
  getElement2.setAttribute(":id", "[[pageid]]");
</script>