Transform all text links into actual links - javascript

How can I transform all text links in a page into actual links?
For example, I want to change all text links like this:
<p>http://www.google.com</p>
or in a table like this:
<td>http://www.google.com</td>
into this:
http://www.google.com
and this:
<td>http://www.google.com</td>

This is what you need:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function createLinks(){
$('p, td').filter(function() {
return this.innerHTML.match(/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,#?^=%&:/~\+#]*[\w\-\#?^=%&/~\+#])?/);
}).each(function(){
var link = $('<a>', { href: this.innerHTML,
text: this.innerHTML });
if(this.tagName == "P")
this.parentNode.replaceChild(link[0], this);
else{
this.removeChild(this.childNodes[0])
this.appendChild(link[0]);
}
});
}
$(document).ready(function(){
$('#create_links').click(function(){
createLinks();
});
});
</script>
<style>
a{
display:block;
}
</style>
</head>
<body>
<p>This shouldn't became a link</p>
<p>http://www.thisshouldbecamealink.com</p>
<p>http://www.anotherlink.com</p>
<table>
<tr>
<td>Not a link</td>
</tr>
<tr>
<td>http://www.validlink.com</td>
</tr>
</table>
<button id="create_links">Create links</button>
</body>
</html>

Related

Consolidating Click Functions & Scalability

How can I simplify and consolidate these two click functions into one, and make it scalable for future table row classes? My code works, but it's not very scalable.
See Fiddle: https://jsfiddle.net/49hvfdje/10/
<!DOCTYPE html>
<html>
<head>
<style> .hidden { display: none; } </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.click.a').click(function() {
$('tr.a').toggleClass('hidden'); // toggleClass for A rows
return false;
});
$('a.click.b').click(function() {
$('tr.b').toggleClass('hidden'); // toggleClass for B rows
return false;
});
});
</script>
</head>
<body>
<table>
<tbody>
<tr><td><a class='click a'>Toggle A Rows</a></td></tr>
<tr class='hidden a'><td>Text</td></tr>
<tr class='hidden a'><td>Text</td></tr>
<tr class='hidden a'><td>Text</td></tr>
<tr><td><a class='click b'>Toggle B Rows</a></td></tr>
<tr class='hidden b'><td>Text</td></tr>
<tr class='hidden b'><td>Text</td></tr>
<tr class='hidden b'><td>Text</td></tr>
</tbody>
</table>
</body>
</html>

insert a span from jQuery after dynamically generated table

I am trying to add a span after dynamically generated table, but the span is getting added before the contents of table are getting loaded.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
The span is getting added before hello. I want the span to be displayed after the table contents.
The span is being added at the bottom in the dom. You are seeing it before the table because the table is aligned right.Try the following:
$(document).ready(function(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span><br/>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" >
<tr><td>hello</td></tr>
</table>
<br/>
</div>
</body>
</html>
you write something like this $("#hu").after("<span>span</span>");
this will put span after table
Use jQuery after function like the way #Reoxey did. However, please ensure you're adding your script before the </body> tag instead of using it on the <head> tag. Adding Javascript before the </body> tag is recommended to prevents render blocking while the scripts load and is much better for site perception head. Adding Javascript before the </body> tag will also improve the site loading speed.
Hey Manu try this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
You should use table id i.e #hu to append as place of #th
Hope this helps. :)
Just change:
$("#th").append("<span>span</span>");
to:
$("table").append("<span>span</span>");
JS Fiddle: http://jsfiddle.net/tk4h80yn/
This will help you
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").after("<span>span</span>");
});
});

Search and display the table values while typing

I refer the following code from stack-overflow itself.but it will not working, anyone can tell what should I update this code.
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
<html>
<head>
<title>Search Event</title>
<script type="text/javascript" src="search.js"></script>
<link href="search.css" rel="stylesheet" type="text/css">
</head>
<body>
<center><input type="text" id="search" placeholder="Type to search"></center>
<center><table id="table">
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table></center>
</body>
</html>
with these simple concept am struggling so far.so please help me.
If i type ap or apple means the correspondent values only should
display other than should hide
Note , not certain if expected result is to toggle td elements ? As js at Question appear to toggle tr elements ? To toggle td elements where text input matches td text, try adding .find("td") before call to .show() to substitute filtering td elements for parent tr elements
If input "app" only td containing text "Apple" should be displayed
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.find("td").show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<html>
<head>
<title>Search Event</title>
<script type="text/javascript" src="search.js"></script>
<link href="search.css" rel="stylesheet" type="text/css">
</head>
<body>
<center><input type="text" id="search" placeholder="Type to search"></center>
<center><table id="table">
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table></center>
</body>
</html>
code is not working because your "search.js" file need jquery
in you code Jquery file missing with jquery it's working fine
it must be
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="search.js"></script>
<link href="search.css" rel="stylesheet" type="text/css">
check this fiddle
Added jquery-1.9.1.js in html..
<head>
<title>Search Event</title>
<script type="text/javascript" src="search.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<link href="search.css" rel="stylesheet" type="text/css">
</head>
Fiddle

Getting a table row to act as a link

I am trying to have my table rows work as links. I have found a few answers on SO that show how to do it, but for some reason my code is not working. Could anyone help me find what is causing it to not work? Thanks.
I have tried looking at
Making a table row (tr) clickable with jQuery (with an a href link, and hover!?)
and
how to get selected table row values using jquery?
so far.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>X</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
tr {
margin:2px;
padding:10px;
display:block;
background:#EEE;
cursor:pointer;
}
tr:hover {
background:#BBB;
}
</style>
</head>
<body>
<script>
$("tr").click(function() {
window.location.href = $(this).attr("href");
});
</script>
<table class="tbl">
<tr class=clickableRow href="http://www.zombo.com">
<td>2014</td>
<td>ACADIA</td>
<td>SLE-2</td>
</tr><tr class=clickableRow href='http://www.xkcd.com'>
<td>2014</td>
<td>ACADIA</td>
<td>Denali</td>
</tr><tr class=clickableRow href='http://www.legit_url_not_fake_at_all.com'>
<td>2014</td>
<td>ACADIA</td>
....
(SNIP)
Thanks.
Use the Document.ready:
<script>
$(document).ready(function(){
$("tr").click(function() {
window.location.href = $(this).attr("href");
});
});
</script>

JavaScript events going into infinite loop

I need to be able to create a hyperlink dynamically on mouseover and remove it on mouseout event. However, when the mouse goes over the link I need it to not behave as if it is mouseout. When this happens the events goes into infinite loop. See example below:
<html>
<head><title>
</title></head>
<body>
<script language="javascript" type="text/javascript">
function showEdit(tcell) {
var editTag = document.createElement('a');
editTag.appendChild(document.createTextNode("test2"));
editTag.setAttribute('name', 'test2');
editTag.setAttribute('id', 'lnkEdit');
editTag.setAttribute('href', '#');
editTag.setAttribute('style', 'float:right;');
tcell.appendChild(editTag);
}
function hideEdit(tcell) {
//var tcell = document.getElementById("tcAdd");
var lnk = document.getElementById("lnkEdit");
tcell.removeChild(lnk);
}
</script>
<div>
<table style="width:200px;">
<tr>
<td id="tcAdd" style="border:1px solid #CCC" onmouseover="showEdit(this);" onmouseout="hideEdit(this);">
test1
</td>
</tr>
</table>
</div>
</body>
</html>
Put the cursor on test1 and test2 to see the difference.
I think I am missing something obvious.
Well, I don't know if you want like this, but it works:
<html>
<head><title>
</title></head>
<body>
<script language="javascript" type="text/javascript">
function showEdit(tcell) {
document.getElementById("lnkEdit").style.display="inline";
}
function hideEdit(tcell) {
document.getElementById("lnkEdit").style.display="none";
}
</script>
<div>
<table style="width:200px;">
<tr>
<td id="tcAdd" style="border:1px solid #CCC" onmouseover="showEdit(this);" onmouseout="hideEdit(this);">
test1
test2
</td>
</tr>
</table>
</div>
</body>
</html>
It's a simpler way than using DOM. But if you want to use DOM, I can take another try =)

Categories