Develop Reference

amp value replace in place

I have an amp-list which loads bunch of data and I show them in their respective placeholders just nice and easy. What I intend to do is get a value and run a simple script on it. Let's think I have
<div>{{title}}</div>
where title is: 'This-is-my-title'
now I would like to replace the '-' in title, I know I could do it with javascript using title.replace(/-/g,' '), how can I do that in place?
I tried
<div>{{title.replace(/-/g,' ')}}</div>
but no luck :(

In plain javascript the following:
title = 'This-is-my-title'; title.replace(/-/g, ' ');
gives you "This is my title".
I am guessing you are using angular, in that case the text within {{ }} is not evaluated as a pure javascript expression. You could write an angular filter to apply to the expresssion (as described in Angular filter to replace all underscores to spaces ). It would probably be easier to handle this in the controller behind the template. Something like:
$scope.title = $scope.title.replace(/-/g,' ');

Looks like you are using amp-mustache. I don't think there is a way for you to use custom JavaScript in Mustache.js here, and restrictions from AMP prevent you to create some kind of function that you can call in {{}}. I would suggest processing in the backend before sending. (Also unfortunately, there are no other templates other than mustache available at this point)
There is a workaround on math using amp-bind here: AMP Mustache and Math
So probably after loading the JSON with amp-state, something like
myItems.map(entry => ({
myString: entry.myString.split('').map(c => c == '-' ? ' ' : c).join('')),
})
might work (I have not tested myself but worth a try, check whitelisted functions here: https://www.ampproject.org/es/docs/reference/components/amp-bind#white-listed-functions) but might still be a pain performance-wise (amp-bind has quite a bit overhead)
Edit: this actually looks quite promising, just found out actually amp-list with amp-bind do accept object for [src], as described in the doc (learning something new myself): https://www.ampproject.org/docs/reference/components/amp-bind
(checked amp-list source code and should work)

Wordpress Editor converts ampersand to &

when I am setting the src of an iframe dynamically with the following javascript in Wordpress:
jQuery(document).ready(function(){
jQuery('iframe').attr('src', 'http://someurl.com/?originid=PORTAL&tijdsblokstart=1700&datum=2014-05-19');
});
The last 2 parameters are not picked up. I know it has someting to do with the encoding of the ampersand, but I tried everything...I'm lost now.
- &
- &
- &
- creating the whole iframe in jQuery
The src has to be set dynamically.
Thanks!

I fixed my issue by creating a function in an external js-file that generates the url for me. So avoid using the ampersand in the Wordpress editor. I would love to hear if someone comes up with a better solution.
http://codex.wordpress.org/Using_Javascript

Here's a workaround that worked for me:
char = '&';
char = char.replace('amp;', '');
console.log(char);

If your problem occurs in post content, there is no universal solution.
Indeed, the & is replaced by & by the wptexturize function from wp-includes\formatting.php:
// Replace each & with & unless it already looks like an entity.
$curl = preg_replace( '/&(?!#(?:\d+|x[a-f0-9]+);|[a-z1-4]{1,8};)/i', '&', $curl );
It's hooked to the the_content filter in file wp-includes\default-filters.php :
add_filter( 'the_excerpt', 'wptexturize' );
The problem is that you can remove this filter but you will loose a lot of formating done by this huge wptexturize function.
One solution for op would be to find a way to remove the ampersand from the code. To do this, you can use jQuery.param to generate the querystring part of the url:
jQuery(document).ready(function(){
jQuery('iframe').attr('src', 'http://someurl.com/?' + jQuery.param({originid: 'PORTAL', tijdsblokstart: 1700, datum: '2014-05-19'}));
});
A really dirty solution would be:
to register a filter to execute before the wptexturize one using priority 9 (by default, priority is 10) so it change your ampersand to something really unique that the wptexturize function will not alter
to register a filter to execute after the wptexturize one using priority 11 that changes back your ampersand subtitute to a real ampersand

passing hashtags as parameters to twitter

I have the following tweet:
var tweet = "I might actually do a 5K: http://t.co/tXQIYlUt #zombies #running"
And I would like to pass this to the twitter api using js
$('.my_div').append('Tweet')
My JS creates this: https://twitter.com/share?text=I%20might%20actually%20do%20a%205K:%20http://t.co/tXQIYlUt%20#zombies #running&via=JustinZollars&url=
which renders this way at twitter.com:
I might actually do a 5K: http://t.co/tXQIYlUt http://mydomain.com/
notice it cut out my hash tags. how can I sanitize my url?
Resources:
docs

encodeURIComponent() your GET param (the tweet variable). Also, don't encode the GET params that you do want to have special meaning (the & and =).
jsFiddle.

How to parse a JSON with trailing and starting text?

I am looking to create an HTML version of a JSON, through JavaScript(jQuery), specifically the unofficial Google Dictionary JSON (http://googlesystem.blogspot.com/2009/12/on-googles-unofficial-dictionary-api.html).
The problem I am facing is that the JSON is not readable because it has this in front of it "dict_api.callbacks.id100(" and is trailed by ",200,null)".
How can I remove this and then put it into a JSON object such that I can attach the elements to the HTML. Thanks in advance.

This is a JSONP response.
It calls a function specified by the callback parameter to give you the response.
You should create a global function to handle the response, and pass its name as the callback.
jQuery will do this for you:
$.getJSON(
"http://www.google.com/dictionary/json?q=test&sl=en&tl=en&restrict=pr%2Cde&client=te&callback=?",
function(response) {
alert(response);
}
)

One thing you can do is write a regular expression (or a pair of them) to do something like:
string.replace(/Regular expression that matches start/, "")
string.replace(/Regulat expression that matches the finish/, "")
Be careful not to use greedy regular expressions if you go this route, I have seen entertaining-but-not-very-helpful results with greed exressions in cases like this.
Otherwise, I would definitely go with the other response by SLaks related to using JQuery, as it should also give you additonal abilities to work with the data later, should your need change after the fact.

Best way to safely read query string parameters?

We have a project that generates a code snippet that can be used on various other projects. The purpose of the code is to read two parameters from the query string and assign them to the "src" attribute of an iframe.
For example, the page at the URL http://oursite/Page.aspx?a=1&b=2 would have JavaScript in it to read the "a" and "b" parameters. The JavaScript would then set the "src" attribute of an iframe based on those parameters. For example, "<iframe src="http://someothersite/Page.aspx?a=1&b=2" />"
We're currently doing this with server-side code that uses Microsoft's Anti Cross-Scripting library to check the parameters. However, a new requirement has come stating that we need to use JavaScript, and that it can't use any third-party JavaScript tools (such as jQuery or Prototype).
One way I know of is to replace any instances of "<", single quote, and double quote from the parameters before using them, but that doesn't seem secure enough to me.
One of the parameters is always a "P" followed by 9 integers.
The other parameter is always 15 alpha-numeric characters.
(Thanks Liam for suggesting I make that clear).
Does anybody have any suggestions for us?
Thank you very much for your time.

Upadte Sep 2022: Most JS runtimes now have a URL type which exposes query parameters via the searchParams property.
You need to supply a base URL even if you just want to get URL parameters from a relative URL, but it's better than rolling your own.
let searchParams/*: URLSearchParams*/ = new URL(
myUrl,
// Supply a base URL whose scheme allows
// query parameters in case `myUrl` is scheme or
// path relative.
'http://example.com/'
).searchParams;
console.log(searchParams.get('paramName')); // One value
console.log(searchParams.getAll('paramName'));
The difference between .get and .getAll is that the second returns an array which can be important if the same parameter name is mentioned multiple time as in /path?foo=bar&foo=baz.
Don't use escape and unescape, use decodeURIComponent.
E.g.
function queryParameters(query) {
var keyValuePairs = query.split(/[&?]/g);
var params = {};
for (var i = 0, n = keyValuePairs.length; i < n; ++i) {
var m = keyValuePairs[i].match(/^([^=]+)(?:=([\s\S]*))?/);
if (m) {
var key = decodeURIComponent(m[1]);
(params[key] || (params[key] = [])).push(decodeURIComponent(m[2]));
}
}
return params;
}
and pass in document.location.search.
As far as turning < into <, that is not sufficient to make sure that the content can be safely injected into HTML without allowing script to run. Make sure you escape the following <, >, &, and ".
It will not guarantee that the parameters were not spoofed. If you need to verify that one of your servers generated the URL, do a search on URL signing.

Using a whitelist-approach would be better I guess.
Avoid only stripping out "bad" things. Strip out anything except for what you think is "safe".
Also I'd strongly encourage to do a HTMLEncode the Parameters. There should be plenty of Javascript functions that can this.

you can use javascript's escape() and unescape() functions.

Several things you should be doing:
Strictly whitelist your accepted values, according to type, format, range, etc
Explicitly blacklist certain characters (even though this is usually bypassable), IF your whitelist cannot be extremely tight.
Encode the values before output, if youre using Anti-XSS you already know that a simple HtmlEncode is not enough
Set the src property through the DOM - and not by generating HTML fragment
Use the dynamic value only as a querystring parameter, and not for arbitrary sites; i.e. hardcode the name of the server, target page, etc.
Is your site over SSL? If so, using a frame may cause inconsistencies with SSL UI...
Using named frames in general, can allow Frame Spoofing; if on a secure site, this may be a relevant attack vector (for use with phishing etc.)

You can use regular expressions to validate that you have a P followed by 9 integers and that you have 15 alphanumeric values. I think that book that I have at my desk of RegEx has some examples in JavaScript to help you.
Limiting the charset to only ASCII values will help, and follow all the advice above (whitelist, set src through DOM, etc.)