Finding and replacing attribute in HTML File - javascript

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>

Related

is there better way coverting html string to DOM?

<div class="row data">
<div class="subdiv">
<div class="check"><input type="checkbox" name="buy" value="260" checked="" onclick="javascript:basket.checkItem();"> </div>
<div class="img"><img src="./img/basket1.jpg" width="60"></div>
<div class="pname">
<span>TX2</span>
</div>
</div>
<div class="subdiv">
<div class="num">
<div class="updown">
<input type="text" name="p_num1" id="p_num1" size="2" maxlength="4" class="p_num" value="2" onkeyup="javascript:basket.changePNum(1);">
<span onclick="javascript:basket.changePNum(1);"><i class="fas fa-arrow-alt-circle-up up"></i></span>
<span onclick="javascript:basket.changePNum(1);"><i class="fas fa-arrow-alt-circle-down down"></i></span>
</div>
</div>
</div>
<div class="subdiv">
<div class="basketcmd">삭제</div>
</div>
</div>
I saw the way using DOMParser().parseFromString, but this solution requires me to convert html code into one line string. Is there better way to convert or skills to make html code to string easily?
my final goal is to use appendChild() so that I can have many "row data" class div. which requires me to make html code to DOM.
As others have stated, going from strings to HTML in JavaScript is dangerous, as it can result in easy-to-exploit XSS (Cross-Site Scripting) vulnerabilities.
If you want to create an element safely, we can do so as follows.
let clicks = 0;
const container = document.createElement("div");
container.setAttribute("class", "container");
const heading = document.createElement("h1");
heading.textContent = "Created & Appended, Click Me!";
heading.addEventListener("click", (event) => {
heading.textContent = `Clicked ${++clicks} Times`;
});
container.append(heading);
document.body.append(container);
We can create elements with createElement, set any attribute with setAttribute, modify the classes with classList or setAttribute, and set the text node content with textContent. By doing this, we can prevent XSS.
We can even add events using addEventListener.

modify / move an existing html tag in the DOM (javascript)

I want to move my div class="contentlinks" tag with its content, to place it in the div class="row" after the div class="col-12".
Here is the basic html architecture :
<span id="data">
<section id="" class="thesectionQ">
<div class="container">
<div class="row">
<div class="col-12">
<h1>Title</h1>
</div>
</div>
</div>
</section>
<div class="col-12 contentlinks">
<a class="btn">link1</a><a class="btn">link2</a>
</div>
</span>
Tags are dynamically created in js... my problem is that I can't seem to use appendChild ...
my problem is that I can't seem to use appendChild ...
I'm trying to target my section with a class="thesectionQ" in a variable as well as my div class="contentlinks" that I want to move :
for example...
var thedata2 = document.getElementById('data').getElementsByClassName('thesectionQ');
var thedata = document.getElementById('data').getElementsByClassName('contentlinks');
thedata2.appendChild(thedata);
but I have errors ... and too often
give section id so it become easy.
document.querySelector('#sectionId div.row')
.appendChild(document.querySelector('div.contentlinks'))

auto complete on editable divs angular js

I am not able to perform the auto suggestion functionality on divs with contenteditable attribute. Also when I write mass-autocomplete to divs, it is showing an error message like "mass-autocomplete not allowed on element div".
The following is code I have written. Could you please give the solution for this?
$scope.getClients = {
suggest: suggest_Client
};
<div class="row">
<div class="col-xs-12">
<div class="marginTB15" mass-autocomplete>
<div class="reach_box" contenteditable="true" ng-model="user.communities" mass-autocomplete-item="getNetworks">
<span class="form-control-feedback form-control-feedback_left_textbox"><img src="images/icon7.png" ></span>
<div class="reach"></div>
</div>
</div>
</div>
</div>
Seems that you using the mass-autocomplete directive incorrectly, it need so have an <input> tag as a element. Consider just having 2 blocks inside your div - one is a normal autocomplete:
<div mass-autocomplete>
<input ng-model="user.communities" mass-autocomplete-item="getNetworks">
</div>
while another one is a static end result of the autocompletion - say <div>{{user.communities}}</div>. And those two will be toggled by click for example. By this you wont' need content-editable at all.
So full code may look like this:
//controller
$scope.stateEdit = false;
$scope.toggleWidgetState = function(){
$scope.stateEdit = !$scope.stateEdit;
}
$scope.getClients = {
suggest: suggest_Client,
on_select:toggleWidgetState //here we put our widget back to read-only state
};
//other logic to handle mass-autocomplete
//template
<div class="row">
<div class="col-xs-12">
<div mass-autocomplete ng-show="stateEdit">
<input ng-model="user.communities" mass-autocomplete-item="getNetworks">
<ul> <li>Cardiologist Connect<button type="button">X</button></li></ul>
</div>
<div ng-show="!stateEdit" ng-click="toggleWidgetState()">
{{getNetworks}}
<span class="form-control-feedback form-control-feedback_left_textbox"><img src="images/icon7.png" ></span>
<div class="reach"></div>
</div>
</div>
</div>

How to get reference to element before directive replaces it with template

I get the data in HTML format. (because we use content mgmt). My task is to write a directive to parse this data into javascript object and then use template to display properly.
My problem is, when inside link method, the template is getting replaced, before I can operate on this HTML data.
My HTML content
<body>
<div ci-course-calendar>
<div class="ci-course-calendar-item">
<div class="ci-course-calendar-item-title">Title</div>
<div class="ci-course-calendar-item-summary">Summary</div>
<div class="ci-course-calendar-item-date">Jan 21, 2016</div>
</div>
<div class="ci-course-calendar-item">
<div class="ci-course-calendar-item-title">Title</div>
<div class="ci-course-calendar-item-summary">Summary</div>
<div class="ci-course-calendar-item-date">Jan 21, 2016</div>
</div>
<div>
</body>
My template of the directive - ci-course-calendar
<div class="accordion">
<div ng-repeat="course in courses">
<!--do something-->
</div>
</div>

Unable to get element in javascript

I have the following HTML data on a website which I am trying to manipulate using an extension in Google Chrome:
<div id="lvl-2">
<div class="loading" style="display: none;"><div class="loading-text"><div class="nowloading">Loading…</div>
<div class="content">
<div class="dirs">
<form class="search">
<input type="text">
</form>
<div class="dirs-list"></div>
</div> <!-- dirs -->
<div class="tunes"><table>
<tbody>
<tr></tr>
...
<tr></tr>
</tbody></table>
</div>
</div>
I am using the following code to get the table element somehow:
var div1 = document.getElementById("lvl-2");
var divChild1 = div1.children;
var divChild2 = divChild1[1].children;
var tables = divChild2[1].children;
But on executing the line where the tables variable is assigned, I am getting this error:
Cannot read property 'children' of undefined.
I am not sure why am I getting this error, as second child of the divChild2 variable should contain the table as a child. What do you suggest I should do?
Ultimately, my aim is to randomize all the rows in the table. If there is another way I can do that, I would welcome it.
P.S. 1: I am a Javascript noob, I think it is abundantly clear.
P.S. 2: Apologies for the weird HTML. I had to remove a lot of useless tags in between the relevant tags. Otherwise the HTML would have gotten huge.
Your HTML is invalid, you are not closing the .loading div and some others. So your DOM is absolutely not the way you expect it to be.
That is why all those stupid people always tell you to indent your code properly. Might be easier to catch problems like this. Validation is also a good way to find problems like this.
This is how your HTML looks after running it through a beautifier (which you could do too before asking a question next time):
<div id="lvl-2">
<div class="loading" style="display: none;">
<div class="loading-text">
<div class="nowloading">
Loading…
</div>
<div class="content">
<div class="dirs">
<form class="search">
<input type="text">
</form>
<div class="dirs-list">
</div>
</div>
<!-- dirs -->
<div class="tunes">
<table>
<tbody>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
Obviously this is not what you expected. I fixed it for you:
<div id="lvl-2">
<div class="loading" style="display: none;">
<div class="loading-text">
<div class="nowloading">
Loading…
</div>
</div>
</div>
<div class="content">
<div class="dirs">
<form class="search">
<input type="text">
</form>
<div class="dirs-list">
</div>
</div>
<!-- dirs -->
<div class="tunes">
<table>
<tbody>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
And with the fixed HTML, your code works.
In your webpage, there are other elements that you don't know. Each text (including line breaks, tabs and spaces) between tags is a TextNode, which is a Node in the DOM document.
var div1 = document.getElementById("lvl-2");
// divChild1 is a TextNode representing the line break and the tab
// between <div id="lvl-2"> and <div class="loading"
var divChild1 = div1.children;
// A textNode doesn't have a children attribute, so divChild2 is undefined
var divChild2 = divChild1[1].children;
// Error
var tables = divChild2[1].children;
To solve it, you can try using "firstElementChild" and "nextElementSibling", that only refers to "true" Nodes (assuming you try to get the "tunes" div. I haven't tested it but it should work) :
var div1 = document.getElementById("lvl-2");
var divChild1 = div1.firstElementChild;
var divChild2 = divChild1.nextElementSibling;
var tables = divChild2.nextElementSibling;

Categories