I have Html contents like
<span>
http://j.mp/eUcRNK
</span>
I want to hyperlink on above html text like this
<span>
<a href="http://j.mp/eUcRNK" class="link" target="_blank">
http://j.mp/eUcRNK
</a>
</span>
How I can do that..
$('span').html(function(i,txt){
return $('<a>').text(txt).attr({'target':'_blank', 'href': txt }).addClass('link');
});
demo
based on the comments below, I guess this solves it.
$('span').html(function(i,txt){
return replaceURLWithHTMLLinks(txt);
});
function replaceURLWithHTMLLinks(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
return text.replace(exp,"<a class='link' href='$1' target='_blank' >$1</a>");
}
updated fiddle
for jquery 1.3.2, just change the jQuery codes a bit.
var span = $('span');
span.html(replaceURLWithHTMLLinks(span.html()));
another updated fiddle
Try
$("span").each(function(){
var text = $(this).text();
$(this).contents().wrap("<a class='link' href='" + text + "' target='_blank' />")
});
Related
I am trying to add a download element to the page. I click it using Greasemonkey.
The new div has been added to the page but the download window is not opening.
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body') [0].appendChild(iDiv);
iDiv.innerHTML = '<button class=button> <a href=' + link + ' target=_blank> </button>';
document.getElementsByClassName('button') [0].click();
<a href=http://somesite.com target=_blank> is invalid. You're missing quotes around the URL.
Also, as #Springfield pointed out, you're not closing your <a> tag.
Solution :
iDiv.innerHTML = '<button class="button"> Link</button>';
which renders :
iDiv.innerHTML = '<button class="button"> Link</button>';
Don't wanna be rude, but first questions first: Where does your anchor-tag end?
You open an a-tag, but its content as well as the end tag are both missing.
I have a series of elements laid out in HTML
I am trying to get the value of the href for each div with the class wsite-com-category-product-wrap and then use this to insert a new button with the same href.
My current code is inserting all the links (for items with the class .wsite-com-category-product-wrap) into themselves meaning that each element has about 10 links in now instead of just the one.
The code I have written to do this:
$(".wsite-com-category-product-wrap").each(function() {
var link = $(this).find("a").attr("href");
$("<a href=" + link + " class='custom-category-button'>Test</a>").insertAfter(".wsite-com-product-price");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wsite-com-category-product-wrap">
Link content
<div>more divs</div>
</div>
You can use a jquery object with .insertAfter, not just a string selector.
So, change this:
$("<a href=" + link + " class='custom-category-button'>Test</a>")
.insertAfter(".wsite-com-product-price");
to:
$("<a href=" + link + " class='custom-category-button'>Test</a>")
.insertAfter($(".wsite-com-product-price", this));
I found that with the insertAfter I needed to add in something ensuring it was only being added to $(this).
I used a new variable insertHere to make it simpler:
$(".wsite-com-category-product-wrap").each(function() {
var link = $( this ).find("a").attr("href");
var insertHere = $(this).find(".wsite-com-product-price");
$( "<a href=" + link +" class='custom-category-button'>Test</a>" ).insertAfter( insertHere );
});
I have a button where I would like to create a bootstrap popover containing html dynamically when I hover over it. So far I have:
$(".btn.btn-navbar").hover(function() {
html = '<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>';
$link = $('<a href="myreference.html" class="p1" data-html="true" data-bind="popover"'
+ ' data-content="' + html + '">');
console.log('$link', $link);
$(this).html($link);
// Trigger the popover to open
$link = $(this).find('a');
$link.popover("show");
}, function() {
console.log('$hi there ');
});
jsfiddle
I'm having trouble getting the html into the popover properly.
Can someone give me a hand with this.
Not sure if you need to create a link dynamically with popover or you need to create popover with html inside only. I have a jsFiddle showing how to create popover dynamically with custom html inside.
function createHoverPopover(htmlContent, jqueryElement, direction) {
jqueryElement.popover({
html: true,
placement: direction,
trigger: "hover",
content: htmlContent,
selector: true
}); }
Your actual problem here is ' data-content="' + html + '">'
You should do the concatenating your self to see what is happening.
The result of it would be:
<a href="myreference.html" class="p1" data-html="true" data-bind="popover" data-content="<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>">
The problem is at this part:
data-content="<ul class="nav"><li>
The data-content attribute will only contain <ul class=, additionally your <a> tag will end here data-content="<ul class="nav">
To correctly add the html to the data-content you should do it this way:
html = '<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>';
$link = $('<a href="myreference.html" class="p1" data-html="true" data-bind="popover">');
$link.data('content', html);
Your problem is the string concatenation, I would create the html element like
html = '<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>';
$link = $('<a />', {
href: 'myreference.html',
"data-html": 'true',
"data-bind": 'popover',
"data-content": html
});
Demo: Fiddle
<div class="links">
<ul>
<li class="pdf"></li>
<li class="weiter">more</li>
</ul>
</div>
For each LI.weiter, I want to grab the link add sth and append it as PDF-Link:
var LinkMarkup = '<a href="';
$('.weiter A').each(function() {
LinkMarkup += $(this).attr('href') + '&type=999" target="_blank">PDF</a>';
$(this).closest('.pdf').append($(LinkMarkup));
});
Thanks a lot!
Close, the anchor is a child of the li, to you can use find. The .pdf is actually a sibling, but is also the previous element, so use .prev. You also need to build the actual a element and append:
$('.weiter').each(function() {
var href = $(this).find("a").attr('href') + "&type=999",
link = "<a href='" + href + "' target=_blank>PDF</a>";
$(this).prev('.pdf').append(link);
});
What I want is a hyperlink More when clicked on runs some javascript function and also changes to a hyperlink Less. Heres what I have which doesnt work. It runs the ajaxpage function fine but not moreToLess. I think its my use of " and ' in the javascript.
<script type="text/javascript">
function moreToLess(){
document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=20', 'tagcloud');lessToMore()" >Less</a>';
}
function lessToMore(){
document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=50', 'tagcloud');moreToLess()" >More</a>';
}
</script>
<span id=tagLinks ><a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=50', 'tagcloud');moreToLess()" >More</a></span>
Yes it is, just escape your single quotes inside of the double quotes that you have in your javascript.. ala \'
<script type="text/javascript">
function moreToLess(){
document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=20\', \'tagcloud\');lessToMore()" >Less</a>';
}
function lessToMore(){
document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=50\', \'tagcloud\');moreToLess()" >More</a>';
}
</script>
<span id=tagLinks ><a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=50', 'tagcloud');moreToLess()" >More</a></span>
You have to escape the ' characters inside the quote:
'<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=20\', \'tagcloud\');lessToMore()" >Less</a>'
I'm not sure if there's anything else wrong, but I think you need to escape your single-quotes that are within other single-quotes:
document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=20\', \'tagcloud\');lessToMore()" >Less</a>\';
It is indeed a quote issue, you can escape the ' character with a \ character
<script type="text/javascript">
function moreToLess(){
document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=20\', \'tagcloud\');lessToMore()" >Less</a>';
}
function lessToMore(){
document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=50\', \'tagcloud\');moreToLess()" >More</a>';
}
</script>
<span id=tagLinks ><a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=50', 'tagcloud');moreToLess()
This kind of confusion is why innerHTML is not always a win. You've got JavaScript embedded in HTML embedded in a JavaScript string literal embedded in more HTML, it's no wonder you're confused.
Here's a simpler version based on toggling the link through DOM methods.
<a id="tagLinks" href="/TagCloud?id=EDI_0009&count=50">more...</a>
<script type="text/javascript">
var ismore= false;
document.getElementById('tagLinks').onclick= function() {
ajaxpage(this.href);
ismore= !ismore;
this.href= '/TagCloud?id=EDI_0009&count='+(ismore? 20 : 50);
this.firstChild.data= ismore? 'less...' : 'more...';
return false;
};
</script>