We Keep Coding

How to check if string contains url anywhere in string using javascript and convert it to anchor tag

I have a textarea in which I am getting user's input data. But I need to know if there is any URL in textarea and convert it to anchor tag. For example:
Textarea Data:
Hi I'm Abdul. My Website is https://website.com
After Anchor Tag:
Hi I'm Abdul. My Website is https://website.com
Currently my code is:
var status = $('#status').val();
var urlCheck = new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+#)?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?");
if(urlCheck.test(status)) {
alert("url inside");
console.log(urlCheck.exec(status)[0]);
}
This is my current code but I don't know how to replace url with anchor tag in that string.

I am not sure if i understand you correctly, but do you want to have it changed live or after the form was sent? If the latter, i would try something like this:
var urlCheck = new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+#)?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?");
if(urlCheck.test(status)) {
alert("url inside");
console.log(urlCheck.exec(status)[0]);
// Here my possible solution (not tried out)
$('#status').val('<a href="http://'+urlCheck.exec(status)[0]+"' target='_blank'>the link</a>");
}
But this would also mean that you could/must check with a RegEX if the user entered http or not.

var status = $('#status').text();
var urlCheck = new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+#)?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?");
if(urlCheck.test(status)) {
alert("It has an URL!");
console.log(urlCheck.exec(status)[0]);
}
document.getElementById("status").innerHTML = status.replace(urlCheck.exec(status)[0],"<a href='"+urlCheck.exec(status)[0]+"'>"+urlCheck.exec(status)[0]+"</a>");
<div id="status">Hi I'm Abdul. My Website is https://website.com</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
We can use the html.replace() to replace the url inside the tags we wanted.

You have to use the JS replace() function.
I set the following example with an input textarea and an output textarea for let you see the difference.
function addUrl() {
var status = $('#status').val();
var urlCheck = /(([a-zA-Z0-9]+:\/\/)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+#)?([a-zA-Z0-9.-]+\.[A-Za-z]{2,4})(:[0-9]+)?(\/.*)?)/;
$('#output').val(status.replace(urlCheck, '$1'));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="status">Input</label>
<textarea id="status" onChange="addUrl()"></textarea>
<br/>
<label for="output">Output</label>
<textarea id="output"></textarea>

use linkifyHtml or linkifyString : Linkify String Interface. Use linkify-string to replace links in plain-text strings with anchor tags.

Replacing words with another word using javascript

I have the following code. I'm trying to change all instances of hello to hey. I have created a variable text to store the string. I have then tried the replace method on that string, but it does not change the string. I want the text in the <p> element tags to be changed to hey hey hey hey, but it does not change. What am I doing wrong?
HTML:
<p id="1">hello hello hello hello</p>
Javascript:
var text = document.getElementById("1").textContent;
text = text.replace(/hello/g,"hey");

You could do like this .
Why not working
For that initial call text= elem.textContent its read the value.
On the second time set text=replace value is not possible .Because the text only have string p elem not a DOM elem
var text = document.getElementById("1").textContent;
console.log(text) //direct string
text = text.replace(/hello/g, "hey")
<p id="1">hello hello hello hello</p>
Solution
var text = document.getElementById("1");
console.log(text) //dom element
text.textContent = text.textContent.replace(/hello/g, "hey")
<p id="1">hello hello hello hello</p>

Calculating a number using a textbox

I've been trying to calculate a number using a number given by a user in a text box. I've been trying to use the following code. But when I try to test it, nothing happens. Is there something I'm missing? And is there a way that I can make the imprint variable global?
<form>
<p>How many products do you want
ingraved?<input id="imprint_amount" name="imprint_amount" type="text"/>
</p>
<p>Names to be Imprinted(one per
line)<TEXTAREA COLS=25 NAME="imprint_text" ROWS=5 WRAP=HARD style="resize:none;"></textarea>
</p>
<input onclick="imprint_price" type="button" value="Finish"/>
<p id="total_cost"></p>
</form>
<script type="text/javascript">
function imprint_price() {
var imprint_cost,
imprint_quality,
imprint_total;
imprint_cost = 10.99;
imprint_quantity = document.getElementById('imprint_amount');
imprint_total = $imprint_cost * parseInt(imprint_quantity, 10);
document.getElementById('total_cost') = "$" + imprint_total;
}
Thanks,
Traci

You will want to use the value property of that input element you are referencing in your variable:
… parseInt(imprint_quantity.value, 10);
For arbitrary HTML elements, you need to use textContent (or innerText to support old IE):
document.getElementById('total_cost').textContent = …;
Assigning to an expression as you did should have thrown a quite accurate exception, check your browser's error console for them.

Change your javascript to:
<script type="text/javascript">
function imprint_price() {
var imprint_cost,
imprint_quantity,
imprint_total;
imprint_cost = 10.99;
imprint_quantity = document.getElementById('imprint_amount').value;
imprint_total = imprint_cost * parseInt(imprint_quantity, 10);
document.getElementById('total_cost').innerHTML = imprint_total;
}
</script>
Working jsFiddle here http://jsfiddle.net/Zt38S/2/

In this line, you'll want to set the innerHTML of the element.
document.getElementById('total_cost').innerHTML = "$" + imprint_total;
This basically sets the text inside the <p></p> to be <p>$x.xx</p>.
And also this line should be
imprint_quantity = document.getElementById('imprint_amount').value;
which retrieves the value from the textbox.
Furthermore, when defining the variables, you wrote "quality". It should be
imprint_quantity,

imprint_quantity = document.getElementById('imprint_amount');
=
imprint_quantity = document.getElementById('imprint_amount').value();
Lemme know if that fixes it, a common enough mistake.

jquery - Dynamically generate url

I am trying to dynamically create a url slug when a user types into an input. Unwanted characters should be removed. Spaces should be replaced by hyphens and everything into lowercase. So if a user types "Ruddy's Cheese Shop" it should render "ruddys-cheese-shop".
This is what I have so far.
<input id="tb1" />
<div id="tb2"></div>
$('#tb1').keyup(function() {
var Text = $('#tb1').val();
Text = Text.toLowerCase();
Text = Text.replace(/[^a-zA-Z0-9]+/g,'-');
$('#tb2').html($('#tb1').val(Text));
});
It almost works but I am new to js. Thanks

Your code but slightly improved.
$('#tb1').keyup(function() {
var text = $(this).val().toLowerCase();
text = text.replace(/[^a-z0-9]+/g, '-');
$('#tb2').text(text);
});
You don't need to find $('#tb1') element over and over again since you have a refference to it inside the function as $(this).
http://jsfiddle.net/jFjR3/

It looks ok except where you set the #tb2 value. I think you want:
$('#tb2').html(Text);
Of course, remember since you've called toLowerCase, you don't need to replace upper case chars. Rather a simpler regexp:
Text = Text.replace(/[^a-z0-9]+/g,'-');
If you also want to update the edit field as the user types, here's a full example. Note that it will only update #td2 when you start typing.
<html>
<head>
<script src="js/jquery.js" ></script>
<script language="javascript">
$(function() {
$('#tb1').keyup(function() {
var Text = $('#tb1').val();
Text = Text.toLowerCase();
Text = Text.replace(/[^a-z0-9]+/g,'-');
$('#tb2').html(Text);
$('#tb1').val(Text);
});
});
</script>
</head>
<body>
<input type="text" id="tb1" value="Ruddy's Cheese Shop" />
<div id="tb2"></div>
</body>
</html>

Looks like you need to run a couple of replaces i.e.
Text = Text.replace(/[\s]+/g,'-');
Text = Text.replace(/[^a-z_0-9\-]+/g,'');
That converts ruddy's Cheese Shop to ruddys-cheese-shop
Hope that helps

pass a html text in an input field using HTML DOM by innerHTML

I have a problem in geting the html content from a div am pass it into an input field
I'm using the following code:
<html>
<body>
<div id="void">
<div id="main"><strong>Hello</strong> my friend</div>
</div>
<br>
<input type="text" id="resul" >
<br>
<script type="text/javascript">
x=document.getElementById("void").getElementsByTagName("div");
document.write("Text of first paragraph: " + x[0].innerHTML);
document.getElementById("resul").value=x[0].innerHTML;
</script>
</body>
</html>
If you will try it, you will see what I mean. By using the command document.write() I get the value that I need from de div tag : "Hello my friend" but when I want to pass this value "Hello my friend" into an input field I get something like this "Hello my friend".
How can I pass into the input field only the text "Hello friend" without tag.
Any help would be much appreciated! Thanks!

How about this:
<script type="text/javascript">
var x = document.getElementById("main");
document.write("Text of first paragraph: " + x.innerHTML);
document.getElementById("resul").value= x.innerHTML;
</script>
to pass the content without the tag you can use
x.textContent || x.innerText;
so:
var x = document.getElementById("main");
var text = x.textContent || x.innerText;
document.write("Text of first paragraph: " + text);
document.getElementById("resul").value = text;