Javascript DOM Document Query on Variable - javascript

So let's say I have a WYSIWYG (Tiny MCE in my case) and I take some input.
I want to look at that input and extract any base64 images and then send those somewhere to be converted to URL's in an AWS bucket.
I can do the last bit but I'm stuck with the middle part which is to extract the elements from a variable.
This is what I am trying that does not work ["TypeError: Cannot read property 'getElementsByTagName' of undefined"]
let dombody = document.createElement("div").append(mcebody);
let imglist = dombody.getElementsByTagName("img");
Thanks for any ideas or suggestions in advance. Perhaps this is not possible.

.append has no return value, so dombody is undefined, so an error is thrown when you try to call a method on it.
Assign the dombody in an earlier statement instead (and remember to use const instead of let when possible):
const dombody = document.createElement("div");
dombody.append(mcebody);
const imglist = dombody.getElementsByTagName("img");

Related

Is there any way of getting the GET parameters with pure Javascript?

Let's say I have a page called https://randompagename.com, I know I can send GET parameters to this page using this syntax: https://randompagename.com/?parameter1="one"&parameter2="two".
I also know that on a Node.js web app I have an easy way of getting these parameters inside a variable. However, when I'm using pure frontend Javascript without Node.js, I usually solve this problem with something like:
const myURL = decodeURI(window.location.href)
This way, I discover that my page is https://randompagename.com/?parameter1="one"&parameter2="two" and then I can parse it excluding everything after the first = sign and then splitting everything on &. Well, even though this is functional I'm probably missing an easier way of solving this problem. How can I get GET parameters on a page without using any library?
You can use the URL object https://developer.mozilla.org/en-US/docs/Web/API/URL
If the URL of your page is https://example.com/?name=Jonathan%20Smith&age=18 you could parse out the name and age parameters using:
let searchString = (new URL(document.location)).search; //?name=Jonathan%20Smith&age=18
let params = (new URL(document.location)).searchParams;
let name = params.get('name'); // is the string "Jonathan Smith".
let age = parseInt(params.get('age')); // is the number 18

I am trying to convert some vanilla JavaScript into jQuery. But all I every get returned is [object object]

I am creating a chatbot. In this function on my js page I am putting the users response into its own 'div' container and adding a time-stamp underneath it. I do it like this so that I can easily access the CSS selectors. All of this code was previously only vanilla JavaScript and worked wonderfully. After having converted it over to jQuery all I get displayed is [object Object]. I am extremely new to jQuery, so a lot of these concepts may have gone over head. Please help me out.
function addChatToChatBoxUser(userReply){
const $chatBox =$("#messages")[0];
var $timestamp2 = $("<div>").addClass("timestamp2");
timestamp2.html(`${new Date()
.toString()
.split(" ")
.slice(0,5)
.join(" "));
var $repliesContainer = $("<div>").addClass("chat-user-side").attr("id", 'userMessages');
var $userDiv = $("<div>").addClass("guest response").attr("id", 'guest');
userDiv.html(`${inputReply}`);
$repliesContainer.append($userDiv);
$repliesContainer.append($timestamp2);
$chatBox.append($repliesContainer);
$chatBox.scrollTop = $chatBox.scrollHeight - $chatBox.clientHeight;
}
The problem is that const $chatBox =$("#messages")[0]; will return the DOM node, and not the jQuery object.
So when you later do $chatBox.append($repliesContainer); it will use the .append of the actual node which will try to convert the $repliesContainer to a string (since it is not a node).
Use $($chatBox).append($repliesContainer); for the correct jQuery .append
man sorry but is ur chatbot using vanilla js having like a array based one like one folder with all functions to import and another with the const for q and const for a
... pls respond cause i also need some help cause i also made one using vanilla and im a complete newbie to progarming as a whole....

putting Javascript variable in other variable's definition

I'm writing a small plugin for ckeditor,
On a button firing, I'm trying to make the editor grab the raw html data to send to the server.
The correct syntax for this is
CKEDITOR.instances.div_id.getData();
or alternatively
CKEDITOR.instances[div_id].getData();
However this is grabbing a set named id, I want it to be relative to its parent id
var id = $(this).parent().attr("id");
var htmlcontent = CKEDITOR.instances.id.getData();
I'm realizing I don't know how to plug a var in that without thinking it's a function falling under CKEDITOR. I should know this but it's just not coming to me.
Anecdotally that might not be a working parent id-grabber
EDIT: To solve the CKeditor issue (which is not easy to find on the net)
CKeditor has some built in API to grab the container element id.
This is a working id-grabber for a CKeditor plugin and the data-grab syntax helped constructed by the answers below:
var id = editor.container.getId();
var htmlcontent = CKEDITOR.instances[id].getData();
as of 12/4/2014
Why doesn't var htmlcontent = CKEDITOR.instances.id.getData(); work? The reason is that id is a variable holding the exact id stored previously in the line
var id = $(this).parent().attr("id");
This id variable holds something like "myElementId" in it. In order for you to use that string, you need to access the instances object using "bracket notation" (Related: Working with Objects MDN) if you do not specifically know the name of "myElementId" in advance.
As a result, this will work
var htmlcontent = CKEDITOR.instances[id].getData();
And would be similar to CKEDITOR.instances.myElementId.getData() if "myElementId" was the id of the parent element previously stored.
If you already have an editor object, you don't need to use CKEDITOR.instances at all, just use
editor.getData();

Javascript & HTML Getting the Current URL

Can anyone help me. I don't use Client-side Javascript often with HTML.
I would like to grab the current url (but only a specific directory) and place the results between a link.
So if the url is /fare/pass/index.html
I want the HTML to be pass
This is a quick and dirty way to do that:
//splits the document.location.href property into an array
var loc_array=document.location.href.split('/');
//have firebug? try a console.log(loc_array);
//this selects the next-to-last member of the array.
var directory=loc[loc.length-2]
url = window.location.href // Not particularly necessary, but may help your readability
url.match('/fare/(.*)/index.html')[1] // would return "pass"
There may be an easier answer, but the simplest thing I can think of is just to get the current URL with window.location and use some type of parsing to get which directory you are looking for.
Then, you can dynamically append the HTML to your page.
This may get you started:
var linkElement = document.getElementById("whatever");
linkElement.innerHTML = document.URL.replace(/^(?:https?:\/\/.*?)?\/.*?\/(.*?)\/.*?$/i,"$1");

E4X : Assigning to root node

I am using Adobe Flex/Air here, but as far as I know this applies to all of JavaScript. I have come across this problem a few times, and there must be an easy solution out there!
Suppose I have the following XML (using e4x):
var xml:XML = <root><example>foo</example></root>
I can change the contents of the example node using the following code:
xml.example = "bar";
However, if I have this:
var xml:XML = <root>foo</root>
How do i change the contents of the root node?
xml = "bar";
Obviously doesn't work as I'm attempting to assign a string to an XML object.
It seems you confuse variables for the values they contain. The assignment
node = textInput.text;
changes the value the variable node points to, it doesn't change anything with the object that node currently points to. To do what you want to do you can use the setChildren method of the XML class:
node.setChildren(textInput.text)
Ah thank you Theo - indeed seems I was confused there. I think the root of the confustion came from the fact I was able to assign
textInput.text = node;
Which I now guess is just implicity calling XML.toString() to convert XML->String. setChildren() is what I was looking for.
If you're trying to change the root element of a document, you don't really need to-- just throw out the existing document and replace it. Alternatively, just wrap your element in a more proper root element (you shouldn't be editing the root node anyway) and you'd be set.
Of course, that doesn't answer your question. There's an ugly JS hack that can do what you want, but bear in mind that it's likely far slower than doing the above. Anyway, here it is:
var xml = <root>foo</root>; // </fix_syntax_highlighter>
var parser = new DOMParser();
var serializer = new XMLSerializer();
// Parse xml as DOM document
// Must inject "<root></root>" wrapper because
// E4X's toString() method doesn't give it to us
// Not sure if this is expected behaviour.. doesn't seem so to me.
var xmlDoc = parser.parseFromString("<root>" +
xml.toString() + "</root>", "text/xml");
// Make the change
xmlDoc.documentElement.firstChild.nodeValue = "CHANGED";
// Serialize back to string and then to E4X XML()
xml = new XML(serializer.serializeToString(xmlDoc));
You can ignore the fix_syntax_highlighter comment.

Categories