Extract data from url with JavaScript - javascript

EDIT_2: I forgot to specify its for Android app, so i dont think this is any use, i made a new post instead :( Added Android TAG..
EDIT: Im making an Android App
I need help to extract a number from an url, generated by JavaScript!
Site is:
http://www.oddsportal.com/sure-bets/
And the path looks like this:
<span class="logos l60"> </span>
<div class="odds-nowrp" xodd="xzoxfxzox">2.62</div> // <- 2.62 is the numer i need
For full path see this screenshot:
What library would do this best? (I know Jsoup cant do it) I have searched a few like:
HtmlUnit
Java Script Engine
Apache Commons BSF
Rhino
But i cant really make sense of it or find any examples for android which look like my problem

or find any examples for android which look like my problem
You need it for android?
Pretty much any library allowing DOM traversing will allow you to do this providing you know how to find your value.
is this value exactly at the same position in DOM every time?
is it wrapped by an easy to identify element? i.e. with a static ID
are there any other value that look alike in the DOM that you don't want?
Based on that, using JQuery for example, you could select it like this :
$('.table-main td.center > a[href^="/bookmaker"] + div[xodd]')
or this:
$('.table-main tr:nth-child(3) div.odds-nowrp[xodd]')

Use Jquery:
var number = $(".odds-nowrp").text();

you can just use regex if you have the url already in escaped string format
reg = /[A-z\"\>\<=?()0-9 \/]*(\d+.\d+)[A-z\"\>\<=?()0-9 \/]*/
reg.exec(url)[1] // this will return your number
if it's already rendered and the xodd value doesn't change, you could do something like this
document.querySelectorAll('.odds-nowrp[xodd=xzoxfxzox]')[0].innerText

Related

How to find a dynamic node class by pattern in JavaScript

I'm working on this WP plugin and I've been trying to get the ID of a custom post kinda thing that is declared in the body class on each page. So it goes like this;
<body class="(Bunch of other classes) ld-courses-1731-parent">
I'm trying to get the number 1731 in my JS function but the number is dynamic so I need to some regex matching with the string pattern.
Pattern: ld-courses-*INT VALUE*-parent
how can I do this with JS? Any help is much appreciated thank you so much.
You can use match if thats the only class in your body:
var classList = document.getElementsByTagName("body")[0].classList;
[...classList].forEach(function(thisClass) {
if (/ld-courses-\b/.test(thisClass)) {
var id = thisClass.match(/\d/g);
console.log(id.join(""));
}
});
<body class="another-class-before another-class-12-hasnum ld-courses-1731-parent another-class-12-hasnumaswell another-class-after">
</body>
Hi Laclogan in regards to your question yes it's possible for sure.
Correct me if i'm wrong but the number comes probably if it's changing for each post directly from the url.
The following site explains if this is the case how to get that number from the url.
https://www.sitepoint.com/get-url-parameters-with-javascript/
In addition you can use the function concat to combine the strings see this site for an example hope it helps.
https://www.w3schools.com/jsref/jsref_concat_string.asp
Could you confirm for me that the number is always present in the url or if this is not the case?

Javascript regex to replace ampersand in all links href on a page

I've been going through and trying to find an answer to this question that fits my need but either I'm too noob to make other use cases work, or their not specific enough for my case.
Basically I want to use javascript/jQuery to replace any and all ampersands (&) on a web page that may occur in a links href with just the word "and". I've tried a couple different versions of this with no luck
var link = $("a").attr('href');
link.replace(/&/g, "and");
Thank you
Your current code replaces the text of the element within the jQuery object, but does not update the element(s) in the DOM.
You can instead achieve what you need by providing a function to attr() which will be executed against all elements in the matched set. Try this:
$("a").attr('href', function(i, value) {
return value.replace(/&/g, "and");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
link
link
Sometimes when replacing &, I've found that even though I replaced &, I still have amp;. There is a fix to this:
var newUrl = "#Model.UrlToRedirect".replace(/&/gi, '%').replace(/%amp;/gi, '&');
With this solution you replace & twice and it will work. In my particular problem in an MVC app, window.location.href = #Model.UrlToRedirect, the url was already partially encoded and had a query string. I tried encoding/decoding, using Uri as the C# class, escape(), everything before coming up with this solution. The problem with using my above logic is other things could blow up the query string later. One solution is to put a hidden field or input on the form like this:
<input type="hidden" value="#Model.UrlToRedirect" id="url-redirect" />
then in your javascript:
window.location.href = document.getElementById("url-redirect").value;
in this way, javascript won't take the c# string and change it.

javascript regex in chrome extension

Okay, a little context. I want to modify some crappy HTML on a page that I use a lot. I'm doing this via my content_script "js", as defined in the manifest.json file of the chrome extension. The primary method I've been using is this sort of ugly thing:
var str1 = 'something already on the page';
var str2 = 'something already on the page, plus some extra stuff';
document.body.innerHTML = document.body.innerHTML.replace(str,st2);
I'm mostly trying to re-order form objects, and expand them a little to show more information, and filter/condense them to be less superfluous. I'd appreciate any pointer as to a better way to do this.
Anyway... here's my specific problem.
I want to retrieve pistol (or any string) from the following:
<form action="map.cgi?use-o" method="post" class="a"><input type="submit" value="pistol" class="m"\></form>
I tried every variation of the following:
str.exec(/value="([^]+)" class/);
and I'm either getting null or junk strings that I don't want. Ideas?
Thanks!
If you insist on regex, then use below one:
(?:value=")([^"]+)
Here is DEMO
Using JavaScript it will look like:
var value = document.querySelectorAll("input[type=submit]")[0].value;

Problem with regexp in userscript for chrome

This might be a noob question, but I have tried to find an answere here and on other sites and I have still not find the answere. At least not so that I understand enough to fix the problem.
This is used in a userscript for chrome.
I'm trying to select a date from a string. The string is the innerHTML from a tag that I have managed to select. The html structure, and also the string, is something like this: (the div is the selected tag so everything within is the content of the string)
<div id="the_selected_tag">
link
" 2011-02-18 23:02"
thing
</div>
If you have a solution that helps me select the date without this fuzz, it would also be great.
The javascript:
var pattern = /\"\s[\d\s:-]*\"/i;
var tag = document.querySelector('div.the_selected_tag');
var date_str = tag.innerHTML.match(pattern)[0]
When I use this script as ordinary javascript on a html document to test it, it works perfectly, but when I install it as a userscript in chrome, it doesn't find the pattern.
I can't figure out how to get around this problem.
Dump innerHTML into console. If it looks fine then start building regexp from more generic (/\d+/) to more specific ones and output everything into a console. There is a bunch of different quote characters in different encodings, many different types of dashes.
[\d\s:-]* is not a very good choice because it would match " 1", " ". I would rather write something as specific as possible:
/" \d{4}-\d{2}-\d{2} \d{2}:\d{2}"/
(Also document.querySelector('div.the_selected_tag') would return null on your sample but you probably wanted to write class instead of id)
It's much more likely that tag.innerHTML doesn't contain what you think it contains.

Techniques to avoid building HTML strings in JavaScript?

It is very often I come across a situation in which I want to modify, or even insert whole blocks of HTML into a page using JavaScript. Usually it also involves changing several parts of the HTML dynamically depending on certain parameters.
However, it can make for messy/unreadable code, and it just doesn't seem right to have these little snippets of HTML in my JavaScript code, dammit.
So, what are some of your techniques to avoid mixing HTML and JavaScript?
The Dojo toolkit has a quite useful system to deal with HTML fragments/templates. Let's say the HTML snippet mycode/mysnippet.tpl.html is something like the following
<div>
<span dojoAttachPoint="foo"></span>
</div>
Notice the dojoAttachPoint attribute. You can then make a widget mycode/mysnippet.js using the HTML snippet as its template:
dojo.declare("mycode.mysnippet", [dijit._Widget, dijit._Templated], {
templateString: dojo.cache("mycode", "mysnippet.tpl.html"),
construct: function(bar){
this.bar = bar;
},
buildRendering: function() {
this.inherited(arguments);
this.foo.innerHTML = this.bar;
}
});
The HTML elements given attach point attributes will become class members in the widget code. You can then use the templated widget like so:
new mycode.mysnippet("A cup of tea would restore my normality.").placeAt(someOtherDomElement);
A nice feature is that if you use dojo.cache and Dojo's build system, it will insert the HTML template text into the javascript code, so that the client doesn't have to make a separate request.
This may of course be way too bloated for your use case, but I find it quite useful - and since you asked for techniques, there's mine. Sitepoint has a nice article on it too.
There are many possible techniques. Perhaps the most obvious is to have all elements on the page but have them hidden - then your JS can simply unhide them/show them as required. This may not be possible though for certain situations. What if you need to add a number (unspecified) of duplicate elements (or groups of elements)? Then perhaps have the elements in question hidden and using something like jQuery's clone function insert them as required into the DOM.
Alternatively if you really have to build HTML on the fly then definitely make your own class to handle it so you don't have snippets scattered through your code. You could employ jQuery literal creators to help do this.
I'm not sure if it qualifies as a "technique", but I generally tend to avoid constructing blocks of HTML in JavaScript by simply loading the relevant blocks from the back-end via AJAX and using JavaScript to swap them in and out/place them as required. (i.e.: None of the low-level text shuffling is done in JavaScript - just the DOM manipulation.)
Whilst you of course need to allow for this during the design of the back-end architecture, I can't help but think to leads to a much cleaner set up.
Sometimes I utilise a custom method to return a node structure based on provided JSON argument(s), and add that return value to the DOM as required. It ain't accessible once JS is unavailable like some backend solutions could be.
After reading some of the responses I managed to come up with my own solution using Python/Django and jQuery.
I have the HTML snippet as a Django template:
<div class="marker_info">
<p> _info_ </p>
more info...
</div>
In the view, I use the Django method render_to_string to load the templates as strings stored in a dictionary:
snippets = { 'marker_info': render_to_string('templates/marker_info_snippet.html')}
The good part about this is I can still use the template tags, for example, the url function. I use simplejson to dump it as JSON and pass it into the full template. I still wanted to dynamically replace strings in the JavaScript code, so I wrote a function to replace words surrounded by underscores with my own variables:
function render_snippet(snippet, dict) {
for (var key in dict)
{
var regex = new RegExp('_' + key + '_', 'gi');
snippet = snippet.replace(regex, dict[key]);
}
return snippet;
}

Categories