I want to sub string and remove the , which appears within the span tag and display the name alone. Below are the two cases which needs to work.
Case1: <span class="datatableheader">No results found, </span>
Case2: <span class="datatableheader">Jude Gomes, </span>
A single function should help in removing the , in both cases and display the result as
<span class="datatableheader">No results found </span>
<span class="datatableheader">Jude Gomes </span>
Appreciate for any help.
Thanks
$(".datatableheader").html ($(".datatableheader").html().replace(",",""));
It's not widely recognized that .html accepts a callback function:
$('.datatableheader').html(function(i,old) {
return old.replace(/, ?/g, '');
});
http://jsfiddle.net/3fBY4/1/
you can try this also
var parts = id.split(':'); //because u have case1: or case2:
// it will split into string in array//
$('#parts[1]').replace(",",""));
//try to print that it will work
nice question.
Related
I got the following HTML:
<div id="editable_phrase">
<span data-id="42">My</span>
<span data-id="43">very</span>
<span data-id="1">first</span>
<span data-id="21">phrase</span>
</div>
and I need to get the data-id attributes when I select (highlight) with a mouse these words. I use the following code:
var data = window.getSelection().getRangeAt(0).cloneContents();//this gets the data for all selected words
console.log(data);
It works fine except that when I select last word phrase, it selects only text without html contents. Any ideas how to fix that? I can use jQuery.
If I select 2 or 3 words, I need to get their data-ids respectively to each word, as it is with getRangeAt(0).cloneContents(). The problem is only with the last word, which does not return HTML code.
Thank you.
EDIT:
There has been a similar thread before, here is a working solution:
https://jsfiddle.net/hallleron/wg1pbwbf/2/
Basically you loop through the siblings in the selection to get each value and then parse the array as string to display it in my result paragraph for better visuals.
ORIGINAL:
If you want a jQuery-free version, here is a fiddle: https://jsfiddle.net/hallleron/wg1pbwbf/
The whole Javascript Part is the following:
document.getElementById('editable_phrase').addEventListener("click", getDataId);
function getDataId(){
console.log(window.getSelection().anchorNode.parentElement.attributes[0].nodeValue);
}
So every time the event listener detects a click, it gets the selected text/span and extracts its data-id attribute from the object.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editable_phrase">
<span data-id="42">My</span>
<span data-id="43">very</span>
<span data-id="1">first</span>
<span data-id="21">phrase</span>
</div>
<script>
$('#editable_phrase').on('click','span',function(){
var res = $(this).attr('data-id');
alert(res);
})
</script>
I am trying to get parse HTML document.
this is the HTML:
<h1>
<span class="memName fn" itemprop="name">Ankur Arora</span>
<span class="display-none" itemprop="image">http://photos1.meetupstatic.com/photos/member/3/8/f/8/member_249974584.jpeg</span>
<span class="display-none" itemprop="url">http://www.meetup.com/Meetup-API-Testing/members/191523682/</span>
</h1>
I need to get the picture and the name.
I try this code:
var name = document.querySelector("memName fn").name;
Anyone can help me? I'm new in javaScript...
Thanks
To get the inner text, you can use the text() function, like this:
HTML:
<span class="memName fn">Ankur Arora</span>
Jquery:
var memName = $(".memName").text();
console.log(memName); // Via console log
alert(memName); // Alert it
It's easy with jQuery. Just include it in your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Then use .text() or .html() to extract the content of the span-elements
var pictureLink = $("span[itemprop='image']").text();
//.html() also gets the html-elements inside
var name = $("span[itemprop='name']").html();
https://jsfiddle.net/bh9mebru/
You can also use innerHTML to get the text.
<span id="memId" class="memName fn">Ankur Arora</span>
document.getElementsByClassName('memName') - This will give the list of elements having the class 'memName'
To get the first element's inner text use document.getElementsByClassName('memName')[0].innerHTML
or access by id .
document.getElementById('memId').innerHTML
I have a big string: Hello <span class="ashakd">my</span> name is <bob>!
I have a second string: llo my name
I have what i want to replace it with:<span class="ashakd">llo my name</span>
I need to replace() it as if the <span class="ashakd"> and </span> didnt exist, but they are replaced with the string so the final result is: He<span class="ashakd">llo my name</span> is <bob>!
PS: <bob> exists so you cant ignore any text between two >'s it must specifically ignore <span class="ashakd"> and </span>
very sorry if this is confusing. ask me to make it clearer if this is confusing
edit
sorry for being unclear, but it must only replace the within my replace. so if the original string was: Hello <span class="ashakd">my</span> name is <bob><span class="ashakd">hello</span>!
the result would be: He<span class="ashakd">llo my name</span> is <bob><span class="ashakd">hello</span>!
This may be too destructive to the original string, but I propose this solution:
var a = 'Hello <span class="ashakd">my</span> name is <bob>!';
var searchString = 'llo my name';
// remove all <span> and </span> tags, you may not want to remove any and all span tags???
a = a.replace(/<\/?span[^>]*?>/g,'');
a = a.replace(searchString,"<span class='ashakd'>"+searchString+"</span>");
What this does is remove all span tags, then search for your "llo my name" search string, and wrap that with a span tag.
Since you said you don't know regex that well, here's a description of:
/<\/?span[^>]*?>/g
<\/? means match on '<' and then optionally a /. This matches both the start and end tags, i.e. <span...> and </span>
[^>]*? means match any character that is NOT > in a non-greedy fashion, i.e. stop matching at the first > found.
The final /g means 'global', which means match <span> and </span> as many times as possible.
I have this html code:
<p>Hello, this is a test replacing, <span class="myclass">over test</span> and <span class="myclass">over test</span>.</p>
My javascript works to replace the word "Hello" with "FuuBar".
document.body.innerHTML = document.body.innerHTML.replace(/Hello/g, "FuuBar");
But I can not replace <span class="myclass">over test</span> by <span class="thanks"><b>Thanks God</b></span>
I am starting in javascript. I need to resolve this in pure js. Could help in my code? And sorry for the English.
JsFiddle for help.
Use the DOM for this. Check here for more info: https://developer.mozilla.org/en-US/docs/DOM
var spans = document.querySelectorAll('.myclass');
for (var i=0; i<spans.length; i++) {
spans[i].classList.remove('myclass');
spans[i].classList.add('thanks');
spans[i].innerHTML = '<b>Thanks god</b>';
}
Have you checked quotations? You should escape them in the classname in JS or use single quotes. Please provide the code if that's not the case.
Other than that, replacing the whole body doesn't seem the best idea for a task like this.
I have searched on the forum and saw posts about changing text dynamically upon click. But in my case I want to change the display dynamically when loading the page from beginning. I already have a function that figure out what I should display:
function phone()
{
//code here
return phone;
}
And my question is how to display the returned phone number in the div below to replace the 1.888.888.8888 part. Can anyone offer some insights? Thank you!
<div class="add-info">
<span class="rightfloat">Order online <span class="red">or call 1.888.888.8888</span></span>
</div>
I would change the HTML to add another <span> tag around the phone number and give that span tag an id attribute in order to access it easily (broke it up on separate lines to reduce scrolling):
<div class="add-info">
<span class="rightfloat">
Order online <span class="red">
or call <span id="contact-number"></span>
</span>
</span>
</div>
Then after the page loads update the span with whatever value you want:
window.onload = function() {
document.getElementById('contact-number').innerHTML = PHONE_NUMBER_VALUE;
}
In JQuery, it would be:
$(document).ready(function () {
$('#contact-number').html(PHONE_NUMBER_VALUE);
});
You can,
<body onload="phone();">
<div class="add-info">
<span class="rightfloat">Order online <span class="red">or call
<span id="phone"></span>
</span>
</div>
</body>
And set the value when the function runs;
function phone() {
document.getElementById("phone").innerHTML = "1.888.888.8888";
}
Instead of returning 'phone', why don't you put an id on your span and just use
document.getElementById('spanId').innerHTML = phone
in your javascript?
Call you code from the window.onload event.
I would separate the number into additional <span> tag with its own id and change content of it with js...
document.getElementById('id_of_span').innerText = 'new number';
Try this
<script>
function phone(number) {
var redText = document.getElementByClassname("red")[0];
redText.innerHTML = "or call " + number;
}
</script>
To call it you can use clicks, loads or anything else. For example
<script>
window.onload = phone('NEW NUMBER HERE');
</script>
Bear in mind that adding another window onload function later will displace this one, so you would either need to add to it, or use a double delegate function, but that's another story...