We Keep Coding

How to get value of URL query parameter with dynamic name?

I need to extract the value of a query parameter in a URL, but the parameter changes on each page.
For example, I want to get the color variable, but it always changes based on the productID. In this case it is 'dwvar_2000440926_color' but for another product it will be 'dwvar_545240926_color'. _color stays consistent, so I'd like to key off that:
https://www.example.com/us/2000440926.html?dwvar_2000440926_color=02
Thanks!

Basic regular expression would work
const myURL = new URL("https://www.example.com/us/2000440926.html?dwvar_2000440926_color=02")
console.log(myURL.search.match(/_color=([^&]+)/)[1]);
// more specfic
console.log(myURL.search.match(/dwvar_\d+_color=([^&]+)/)[1]);

You should use regex. Based on the description of the URL behavior you described you could do something like this:
const url = new URL("https://www.example.com/us/2000440926.html?dwvar_2000440926_color=02");
// Now url.search contains your query parameters.
// We gonna apply the regex on it to capturing the color id
let matches = url.search.match(/dwvar_\d+_color=(\d+)/)
// `matches` now contains the captured groups
console.log(matches[1])
// log : 02

Assuming that 1) you want to do this on the client side 2) the color param always begins with dwvar as shown in your example and 3) that there is never more than one dwvar param, you can use the following javascript:
let searchParams = new URLSearchParams(document.location.search);
searchParams.forEach((param_value, param_name) => {
if (param_name.indexOf('dwvar') == 0) {
console.log(param_value)
}
})

window.location.search.slice(1).split('&').reduce((acc, it) => {
const [key, val] = it.split('=');
return {
...acc,
[key]: val,
};
}, {});

Twitter style (stock) mention with Slate.js

I am building a note taking app and for text I use the Slate.js editor. Twitter mention also works with stocks like this
It basically turns into a mention if /\$[a-zA-Z]{1,6}/ is true. What I have tried is to use the normalizeNode callback to change if the regex matches, by deleting the text and inserting a new node at that location but so far I've been unsuccessful.
Slate.js also has a nice set of examples but unfortunately haven't found any of them to demonstrate what I'm trying to do. What would be a good way to go about implementing this feature? Am I wrong to assume it's through using normalizeNode?

I solved this question when working on typed in emojis. For example, when a person typed :smile: we wanted the emoji to appear (a la Slack). The only differences with stock symbols and emojis would be the stock lookup and the usage of Transforms.insertNodes instead of Transforms.insertText.
The code below should be enough to help someone solve their use case. The key is startIndex and endIndex which targets the replacement.
Here's my solution:
editor.normalizeNode = entry => {
const [node, path] = entry;
if (!Text.isText(node)) {
return normalizeNode([node, path]);
}
const emojiMatch = node.text.match(EMOJI_REGEX);
if (!emojiMatch) {
return normalizeNode([node, path]);
}
const [searchMatch, colonMatch] = emojiMatch;
const { index: startIndex } = emojiMatch;
const endIndex = startIndex + searchMatch.length;
const [matchedEmoji] = emojiIndex.search(colonMatch).map(emoji => emoji) as BaseEmoji[];
if (!matchedEmoji) {
return normalizeNode([node, path]);
}
Transforms.insertText(editor, matchedEmoji.native, {
at: {
anchor: { path, offset: startIndex },
focus: { path, offset: endIndex },
}
})
normalizeNode([node, path]);
}

Split out props.location.search value

I'm trying to split out the values from props.location.search in React/Redux. I've successfully obtained the mixOne split however I can't seem to return the value of quantity. Here's my code:
const mixOne = props.location.search
? String(props.location.search.split("mixOne=")[1])
: "None";
const quantity = props.location.search
? Number(props.location.search.split("=")[1])
: 1;
And here's the URL that gets generated:
const addToCartHandler = () => {
props.history.push(
`/Cart/${productId}?quantity=${quantity}?mixOne=${mixOne}`
);
};
As you can see quantity returns null, when I need the value selected

props.location.search.split("=") on "?quantity=1?mixOne=Grape" would return [ '?quantity', '1?mixOne', 'Grape' ] since the next = is not until after mixOne.
There's a few different fixes here.
Your query string is invalid– a ? denotes the start of the query string. Separate parameters should be split up using & ampersand characters. It should look like this: ?quantity=1&mixOne=Grape
If you follow the standard here, you can then split it two ways: by = and then by & to get the different parameters. However, there is an easier way.
Using the new-ish URLSearchParams API, you can parse your parameters in a predictable way:
// Use the constructor with your `props.location.search`
const queryParams = new URLSearchParams(props.location.search);
// Use the getters to grab a specific value
const quantity = queryParams.get("quantity");
// Ensure it's a number for safety
const quantityNum = Number(quantity);
// ... the rest of your code here

The query is wrong. You're using double question marks. The second ? should be replaced with &.
?quantity=1&mixOne=Grape

Wildcard redirects with javascript?

I'm trying to match URLs at a specific path and redirect them to a subdomain (don't ask why I'm doing this in Javascript).
Basically I can do this for the basics, this is on a page at example.com:
if (window.location.pathname == "/weddings" || window.location.pathname == "/weddings/"){
window.location.replace("https://blog.example.com/weddings/");
}
But now I need to do something similar for wildcards. I need to match /weddings/* and redirect to https://blog.example.com/weddings/*.
How do I do this with Javascript?
UPDATE
This seems to work, but is this the best method?
if (window.location.pathname.startsWith("/weddings/")) {
window.location.replace("https://blog.example.com" + window.location.pathname);
}

You can try this sample code.
const urlRegex = '/weddings/*';
if (window.location.pathname.match(urlRegex) !== null){
window.location.replace("https://blog.example.com/weddings/");
}

You could use String.prototype.match with regex
const regex = /\/weddings\/(.*)/
const pathnames = [
"/wedding",
"/weddings",
"/weddings/",
"/weddings/a",
"/weddings/b",
"/weddings/c/d?e=f",
]
pathnames.forEach((pathname) => {
const match = pathname.match(regex)
if (match) {
console.log(`https://blog.example.com/weddings/${match[1]}`)
}
})
Reference
String.prototype.match()

You can simplify this with URL API
The properties are are the same as window.location so you can check what's in the pathname and change the host accordingly. Then redirect to the resultant
Simplified example looping over a couple of test cases for demo purposes:
For live version just use new URL(location.href)
const samples = [
'http://example.com/food/',
'http://example.com/weddings/',
'http://example.com/weddings/nice-one',
'http://example.com/weddings/foo?param=1'
]
samples.forEach(str => {
const url = new URL(str);
if (url.pathname.startsWith('/weddings')) {
url.host = 'blog.' + url.host;
}
console.log(url.href)
})

ReactJS / ES6: Searching Japanese text using includes?

So, I'm writing a client-side search and I need to look through strings of Japanese characters. I'm wondering how to do this properly?... i.e. Do I change the format of the text into utf-8 something and then search the utf-8?
Example:
All my data has japaneseData.title : "フェリーチェ三田"
When I type in my search.value as : "フェ" using japaneseData.title.includes(search.value) I don't get a match...
How do I do this correctly?
Okay, after further inspection, the comments were correct and includes was finding the substring. This is all happening inside of a filter() and I'm trying to return the objects that match...
After changing my code to:
let filteredArrayofObjects = Lists.houseLists.filter(house => house.building_name.includes(query.search));
I was getting back some but not all. Problem cases:
"アーバイルスパシエ芝浦BAY-SIDE".includes("エ芝浦"); // this evaluates to true, but does not get included in my filtered array...
Okay, further digging, it seems the issue is I need to wait for the filter process before returning the results... haven't yet found a solution to that just yet.
async filter(arr, callback) {
return (await Promise.all(
arr.map(async item => {
return (await callback(item)) ? item : undefined;
})
)).filter(i => i !== undefined);
}
handleFilterLists = async (query = {}) => {
const { Lists } = this.props;
let searchResults = await this.filter(Lists.houseLists, async house => {
return house.building_name.includes(query.search);
// the final evaluation to look similar to this:
// var newArray = homes.filter(function (el) {
// return el.price <= 1000 &&
// el.sqft >= 500 &&
// el.num_of_beds >=2 &&
// el.num_of_baths >= 2.5;
// });
});
this.setState({ searchResults });
}
Okay, so, I'm trying to set state.searchResults after the filter method has checked for matching objects in the array Lists.houseLists...

includes returns true or false if the substring is detected or not. If you want the index of where the first detected substring begins, use indexOf.
I used your sample source and search text with includes and it returns true.
Edit:
I used your updated data and this still works. https://codepen.io/anon/pen/RMWpwe
const sourceText = 'アーバイルスパシエ芝浦BAY-SIDE';
const searchText = 'エ芝浦';
const lists = [
'スパシエ',
'芝浦BAY-SIDE',
'エ芝浦',
'パシエ芝浦BAY'
];
console.log(lists.filter(item => item.includes(searchText)));
// ["エ芝浦", "パシエ芝浦BAY"]