Javascript split string between multiple spans - javascript

I have scoured Google looking for an answer but I cant seem to find one.
I need to split the following string into separate variables
the string is stored as a variable
:-
var location = autocomplete.getPlace();
var address = location['formatted_address'];
Output:-
<span class="street-address">Street address</span>, <span class="locality">Town</span>, <span class="region">County</span> <span class="postal-code">Post Code</span>, <span class="country-name">Country</span>
eg.
var street = "Street address";
var town = "Town";
var county = "County";
var postc = "Post Code";
var country = "Country";
So I need to get the contents between
<span class="street-address"></span>
<span class="locality"></span>
etc...
Sometime there are extra spans sometimes less.
I have looked at some javascript but it only gets the content between:-
<span class="locality"> and the very last </span>
Any help in the right direction would be greatly

Are you using plain javascript? or jQuery?
in javascript you can get the text inside an element via:
var1 = document.getElementByClass("street-address").innerText
or in jQuery:
var streetAddress = $('.street-address').text();
var city= $('.city').text();

If you're using jQuery:
var 1 = $('span.street-address').text();
var 2 = $('span.locality').text();
var 3 = $('span.region').text();
var 4 = $('span.postal-code').text();
var 5 = $('span.country-name').text();
It should be that simple, unless I am missing something in the question.

Can you use jQuery? Check this out https://jsfiddle.net/zsxar4r4/
var address = [];
$('span').each(function(idx, span) {
address.push($(span).html());
})
console.log(address);

You can use the getElementsByClassName() method, which will return an array-like object.
https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName
var addressData = document.getElementsByClassName('address');
//And than do something with the object. You can access it like an array:
console.log(addressData[2].innerHTML);

Related

Parse HTML using javascript

I have a string which is inside the HTML code.
here, I need to get a string separately using javascript.
outsidePara
and
insidePara
var msg="<p><sp id='msgId'>insidePara</sp>outsidePara</p>"
Is the <p> always in the same format (i.e. will always have a ```
If so, jQuery's $('p sp#blablabla') should be able to help as you can then select the text of the parent <p> and trim off the <sp>
var sender = $('p sp#blablabla').text()
var msg = $('p sp#blablabla').parent('p')
var msgHTML = msg.html()
var msgBody = msgHTML.substr(msg.length - (9 + sender.length)); // 9 for the two <sp> tags
const cheerio = require('cheerio')
const $ = cheerio.load(`<p><sp id=\"blablabla\">puppy</sp>hi</p>`)
console.log($("p sp").text()) // will print puppy
console.log($("p").contents().last().text()) // will print hi

Extract all ONLY IPs from the text, between tags

Could you please help to do the following in JavaScript:
The text contains something like that:
text_to_parce = "<b>word</b> <b>192.168.0.1</b> <b>name</b> <b>192.168.1.19</b> <b>address</b>"
From this string I want to extract ONLY IP addresses, other tagged info should be ignored, to the array to get the following:
192.168.0.1
192.168.1.19
var ip_pattern= /\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b/gi;
var userip_array = text_to_parce.match((/<li>(ip_pattern)<\/li>/)[1]).join("\n");
message.innerText = (userip_array);
It seems to be not working at all. Please help where is the mistake!
This works for two ip as you show.
text_to_parce = "<b>word</b> <b>192.168.0.1</b> <b>name</b> <b>192.168.1.19</b> <b>address</b>";
var numberPattern = /\d+/g;
var a=text_to_parce.match( numberPattern );
var ip_1=a[0]+'.'+a[1]+'.'+a[2]+'.'+a[3];
var ip_2=a[4]+'.'+a[5]+'.'+a[6]+'.'+a[7];
console.log(ip_1);
console.log(ip_2);

Add Javascript to replace Span tags

I have an online store that has limited access to make any correct edits to code.
I am trying to implement proper Price Schema as they have:
<span itemprop="price">$57.00</span>
This is incorrect.
It needs to be set up like this
<span itemprop="priceCurrency" content="USD">$</span>
<span itemprop="price">57.00</span>
Is there something in JavaScript or jQuery that can manipulate this by separating the Currency Symbol and Price?
Thanks
You get the ELEMENT text:
var value = $("span[itemprop='price'").text();
Then you could generate the html using regex like:
var html = '$57.00'.replace(/([^\d])(\d+)/,
function(all, group1, group2){
return 'some html here =' + group1 + '= more hear =' + group2 });
Might not be 100% bug-free, but it should get you started:
<script type="text/javascript">
var n = document.getElementsByTagName('*')
for(var i=0;i<n.length;i++)
{
if(n[i].hasAttribute('itemprop')) //get elements with itemprop attribute
{
var p = n[i].parentNode
var ih = n[i].innerHTML //grab the innerHTML
var num = parseFloat(ih) //get numeric part of the innerHTML - effectively strips out the $-sign
n[i].innerHTML = num
//create new span & insert it before the old one
var new_span = document.createElement('span')
new_span.innerHTML = '$'
new_span.setAttribute('itemprop', 'priceCurrency')
new_span.setAttribute('currency', 'USD')
p.insertBefore(new_span, n[i])
}
}
</script>
Somthing along the lines of
// find all span's with itemprop price
document.querySelectorAll("span[itemprop='price']").forEach(function(sp){
// grab currency (first char)
var currency = sp.innerText.substr(0,1);
// remove first char from price val
sp.innerText = sp.innerText.substr(1);
// create new element (our price-currency span)
var currencySpan = document.createElement("span");
currencySpan.innerText = currency;
currencySpan.setAttribute("itemprop", "priceCurrency");
currencySpan.setAttribute("content", "USD");
// Append it before the old price span
sp.parentNode.insertBefore(currencySpan, sp);
});
Should do what your after.
See demo at: https://jsfiddle.net/dfufq40p/1/ (updated to make effect more obvious)
This should work -- querySelectorAll should be a bit faster, and the regex will work with more than just USD, I believe.
function fixItemPropSpan() {
var n = document.querySelectorAll('[itemprop]');
for (var i = 0; i < n.length; i++) {
var p = n[i].parentNode;
var ih = n[i].innerHTML;
var num = Number(ih.replace(/[^0-9\.]+/g, ""));
n[i].innerHTML = num;
//create new span & insert it before the old one
var new_span = document.createElement('span');
new_span.innerHTML = '$';
new_span.setAttribute('itemprop', 'priceCurrency');
new_span.setAttribute('currency', 'USD');
p.insertBefore(new_span, n[i]);
}
}
Here is a suggestion of how you can make this work, though i would not suggest doing it like this (too many cases for content="").
Example of the logic you could use to transform the incorrect format to the correct one.
Hope you find it useful. :]

Having trouble converting user input into a graphic bar

The code seems to work fine when inputting numbers 1-9 but anything above doesn't work, what could be the issue? Here is the code:
var varkString = prompt('Enter your VARK scores - [visual|aural|read|kinesthetic]','9|3|11|10');
var subStrings = varkString.split('|');
var visual = varkString[0];
var aural = varkString[1];
var read = varkString[2];
var kinesthetic = varkString[3];
var varkBar = 30*visual
document.writeln('<img src="bar_blue.png" width='+varkBar+' height="25"/>');{
}
Edit: Solved
You are parsing first character when you are getting visual, second on aural and third on read.
I belive that you want to use subStrings
var visual = subStrings[0];
var aural = subStrings[1];
var read = subStrings[2];
when you are slpiting the string varkString the array will automatically constructed and assigned to subStrings.so use it like this:
var subStrings = varkString.split('|');
var visual = subStrings[0];
var aural = subStrings[1];
var read = subStrings[2];
var kinesthetic = subStrings[3];

Variable Returning NaN Value - Cannot find out why

I am having to pickup from where someone in the business left off many years ago with an aging texting system.
It was built using ASP classic and sends a string to an API that then texts out, all this is neither here nor there. The problem i have is no JS experience, I am am a SQL Developer and did a little bit of ASP Classic (VBScript) years ago.
This piece of JScript picks up information from several form boxes and then places them in a string which is then passed to variable on a processing page to text out. The fields 'QValue, Indemnity and Excess' are all numeric. The Cover is text and it is replacing the cover text with 'NaN' now I understand this is for 'Not A Number' well that is exactly what it is, not a number but I want the text string.
Here is the snippet of code in question:
<script type="text/javascript">
function changeMessageText()
{
var messagetxt = document.getElementById('message').value
var QValue = document.getElementById('QValue').value
var Cover = document.getElementById('Cover').value
var Excess = document.getElementById('Excess').value
var Indem = document.getElementById('Indemnity').value
var messagetxt=messagetxt.replace("[QValue]", + QValue)
var messagetxt=messagetxt.replace("[Cover]", + Cover2)
var messagetxt=messagetxt.replace("[Excess]", + Excess)
var messagetxt=messagetxt.replace("[Indem]", + Indem)
document.getElementById('messageText').innerHTML = messagetxt;
}
</script>
Cheers.
When you do string.replace(searchvalue,newvalue), there is no need of + before the newValue
var messagetxt=messagetxt.replace("[QValue]", QValue)
//cover or cover2 whichever appropriate
var messagetxt=messagetxt.replace("[Cover]", Cover)
var messagetxt=messagetxt.replace("[Excess]", Excess)
var messagetxt=messagetxt.replace("[Indem]", Indem)
Is it normal that you use Cover2 in the replace where you read the input value and store it in the Cover variable ?
Those are two different variables and from the code you provided, we can only assume that Cover2 is initialized with NaN (which might not be the case, it can be copy/paste error).
Here is how you do it:
var messagetxt = document.getElementById('message').value;
var QValue = document.getElementById('QValue').value
var Cover = document.getElementById('Cover').value
var messagetxt=messagetxt.replace("[QValue]", QValue)
var messagetxt=messagetxt.replace("[Cover]", Cover)
document.getElementById('messagetxt').innerHTML = messagetxt;
Here is a working example of this: http://jsfiddle.net/F24cr/
Enjoy

Categories