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
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>