Develop Reference

js get array value begin with # [duplicate]

I have a form DOM element:
var virDom = document.getElementsByTagName("form")[0];
virDom has two fields with IDs creditId and pwdId... I can access virDom.creditId without any issue, but virDom.pwdId.. is failing with a syntax error, because of the periods contained in the name.
How can I access such properties?

Use bracket notation:
virDom['creditId']
virDom['pwdId..']
This applies to any object, and it is particularly useful for non-identifier-safe characters and also for accessing keys that you may not know ahead of time.

For a nested object with a special character like below,
var details = {"name-details": {"first-name": "Kiran"}}
use
console.log(details["name-details"]["first-name"])

Read data with dash operator using React

This seems to be very silly to me but I am having this problem. Can anybody help me with this.
So, I have an API that I am fetching some data and seems that the API response has a data format like this:
start-time:2323232
end-time:2332323
Now, when in my react rendering component, I am trying to display the data like this:
{data.start-time}
I am actually getting an error saying that time is undefined. Are there any rules that we cannot read/display data in JSX with - separator or something like that. Or, Does anybody know how can I solve that problem. Any helps would be highly appreciated.

You cannot use start-time as an identifier. you need to use square brackets to access the property in this case
data["start-time"]
For further reference Object property accessors

You can only use the dot notation if the property name is a valid JavaScript identifier.
In JavaScript, identifiers are case-sensitive and can contain Unicode letters, $, _, and digits (0-9), but may not start with a digit.
Properties that are not valid identifiers must be accessed through the bracket notation.
const data = { name: "stopwatch", "start-time": 2323232, "end-time": 2332323 };
console.log(data.name); // <- valid identifier
console.log(data["start-time"]); // <- invalid identifier

QuerySelector on ID with curly bracket in name

I'm creating a dynamic filter and this is working fine but I've one problem. I'm selecting all filters on a querySelectorAll function combined with a php get function. Unfortunately some of the dynamic content has weird names like:
(art) and more
With a split join function this will result in the following code:
document.querySelector('#(art)_and_more');
This will result into a error cause it's not a valid selection. Does anyone know a way how to solve this?
I would like to keep my names as they are cause it's part of a big system.

If it's an ID, then you'd use getElementById since by definition there can be only one match (IDs must be unique).
var element = document.getElementById("(art)_and_more");
In the general case, you'd use a quoted attribute selector:
var list = document.querySelectorAll("[id='(art)_and_more']");
// or
var list = document.querySelectorAll('[id="(art)_and_more"]');
...but again, IDs must be unique.

Regex to return all attributes of a web page that starts by a specific value

The question is simple, I need to get the value of all attributes whose value starts withhttp://example.com/api/v3?. For example, if a page contains
<iframe src="http://example.com/api/v3?download=example%2Forg">
<meta twitter="http://example.com/api/v3?return_to=%2F">
Then I should get an array/list with 2 member :http://example.com/api/v3?return_to=%2Fandhttp://example.com/api/v3?download=example%2Forg (the order doesn’t matter).
I don’t want the elements, just the attribute’s value.
Basically I need the regex that returns strings starting with http://example.com/api/v3?and ending with a space.

There is the CSS selector * meaning "any element".
There is no CSS selector meaning "any attribute with this value". Attribute names are arbitrary. While there are several attributes defined in the HTML specs, it's possible to use custom ones like the twitter attribute in your example. This means you'll have to iterate over all the attributes on a given element.
With out a global attribute value selector, you will need to manually iterate over all elements and values. It may be possible for you to determine some heuristics to help narrow down your search before going brute force.

A regular expression would likely look like this:
/http:\/\/example\.com\/api\/v3\?\S+/g
Make sure to escape each / and ? with a backslash. \S+ yields all subsequent non-space characters. You can also try [^\s"]+ instead of \S if you also want to exclude quote marks.
In my experience, though, regexes are usually slower than working on already parsed objects directly, so I’d recommend you try these Array and DOM functions instead:
Get all elements, map them to their attributes and filter those that start with http://example.com/api/v3?, reduce all attributes lists to one Array and map those attributes to their values.
Array.from(document.querySelectorAll("*"))
.map(elem => Object.values(elem.attributes)
.filter(attr => attr.value.startsWith("http://example.com/api/v3?")))
.reduce((list, attrList) => list.concat(attrList), [])
.map(attr => attr.value);
You can find polyfills for ES6 and ES5 functions and can use Babel or related tools to convert the code to ES5 (or replace the arrow functions by hand).

How can I access object properties containing special characters?

I have a form DOM element:
var virDom = document.getElementsByTagName("form")[0];
virDom has two fields with IDs creditId and pwdId... I can access virDom.creditId without any issue, but virDom.pwdId.. is failing with a syntax error, because of the periods contained in the name.
How can I access such properties?

Use bracket notation:
virDom['creditId']
virDom['pwdId..']
This applies to any object, and it is particularly useful for non-identifier-safe characters and also for accessing keys that you may not know ahead of time.

For a nested object with a special character like below,
var details = {"name-details": {"first-name": "Kiran"}}
use
console.log(details["name-details"]["first-name"])