how to convert https link on textarea into <a> tag during editing on <div> block

Ask Question Forum:

Model Library:2025-02-08 Updated:A.I. model is online for auto reply question page

Show

ASK RECENT

how to convert https link on textarea into <a> tag during editing on <div> block

Asked by D Ft

at 2024-08-29 16:33:45

Point:0 Replies:4 POST_ID:829256USER_ID:12422

Topic:

javascript;css;html

my question is as title.

I searched a lot site in google, all converts such https link into <a> tag by 1-time.

For example:https://stackoverflow.com/questions/51121838/replace-http-links-with-anchor-tag

After add more http link, it will fail...

const text = 'here is a message with a link to https://www.google.com and another link to https://stackoverflow.com';
const changedText = text.replace(
/(https?:\/\/)([^ ]+)/g,
'<a target="_blank" href="$&">$2</a>'
);
console.log(changedText);
document.body.innerHTML += changedText;

I want to add it 1 by 1 during editing , and will auto convert it

Any idea ?

Accepted Solution

Expert: Norton Alex replied at 2024-08-31 10:07:09

500 points Excellent

<!DOCTYPE html>
<html lang="en-US" >
<head>
<style>
[contentEditable=true]:empty:not(:focus):before{
content:attr(data-text);
color:#888;
}
button{
display:block;
float:left
}
</style>
</head>
<body>
<button onclick="paste_href(document.getElementById('obj'))" style='cursor:pointer;background:green;width:100px;height:30px;'>
<span style='color:white' >Link</span>
</button>
<button style='margin-left:20px;cursor:pointer;background:green;width:100px;height:30px;'>
<span style='color:white' onclick="edit(this);">Un-Editable</span>
</button>
<span style='margin-left:10px;'>The href <a> tag link inside div block can be triggered when set it to Un-Editable.</span>
<div id="obj" contenteditable="true" data-text="type here...."
style='position:absolute;border: 1px solid grey;font-size:19px;
margin:50px 0px 5px 0px;padding:10px;min-height:100px;font-family:Times New Roman;
width:735px;max-height:500px;overflow:auto;border-width:1px;border-color:#c0c0c0'
>
https://example.com
</div>
<script>
function edit(t){
var obj=document.getElementById('obj');
if (t.innerHTML=='Un-Editable'){
t.innerHTML='Editable';
obj.setAttribute('contenteditable','false');
}
else {
t.innerHTML='Un-Editable'
obj.setAttribute('contenteditable','true');
}
}
function paste_href(obj){
var b=[];
var ol=obj.querySelectorAll("ol");
var len=ol.length;
for (var a=0;a<len;a++){b[a]=ol[a].innerHTML;ol[a].innerHTML="";}
var text = obj.innerHTML;
text=text.replace(/<div>/g,' <div>');
text=text.replace(/<\/div>/g,' </div>');
text=text.replace(/href="https:\/\//g,'href="!xvvvx!');
text=text.replace(/href="http:\/\//g,'href="!yvvvy!');
text=text.replace(/tmpxx">https:\/\//g,'tmpxx">!wvvvw!');
text=text.replace(/tmpxx">http:\/\//g,'tmpxx">!zvvvz!');
text = text.replace(
/(http(s?):\/\/)([^ ]+)/g,
'<a style="color:blue;text-decoration:underline;" target="_blank" href="$&" tmpxx="tmpxx">$&</a>'
);
text=text.replace(/href="!xvvvx!/g,'href="https://');
text=text.replace(/href="!yvvvy!/g,'href="http://');
text=text.replace(/tmpxx">!wvvvw!/g,'tmpxx">https://');
text=text.replace(/tmpxx">!zvvvz!/g,'tmpxx">http://');
obj.innerHTML = text;
var ol=obj.querySelectorAll("ol");
var len=ol.length;
for (var a=0;a<len;a++){ol[a].innerHTML=b[a];}
text=text.replace(/ <div>/g,'<div>');
text=text.replace(/ <\/div>/g,'</div>');
var a=obj.querySelectorAll("a");
var len=a.length;
for (var i=0;i<len;i++){
//console.log('before:',a[i].getAttribute('href'),a[i].href);
var tmp=a[i].getAttribute('href').split('<');
a[i].setAttribute('href',tmp[0]);
}
return 0;
}
</script>
</body>
</html>

I also put it at

https://computer28.com/learn-center/paste_href.html

Expert: Norton Alex replied at 2024-08-30 22:27:33

it is some changed, u can add some other tag that u don't want convert it to a tag href link

such as <ol> tag for code area

function paste_href(obj){
var b=[];
var ol=obj.querySelectorAll("ol");
var len=ol.length;
for (var a=0;a<len;a++){b[a]=ol[a].innerHTML;ol[a].innerHTML="";}
var text = obj.innerHTML;
text=text.replace(/<div>/g,' <div>');
text=text.replace(/<\/div>/g,' </div>');
text=text.replace(/href="https:\/\//g,'href="!xvvvx!');
text=text.replace(/href="http:\/\//g,'href="!yvvvy!');
text=text.replace(/tmpxx">https:\/\//g,'tmpxx">!wvvvw!');
text=text.replace(/tmpxx">http:\/\//g,'tmpxx">!zvvvz!');
text = text.replace(
/(http(s?):\/\/)([^ ]+)/g,
'<a style="color:blue;text-decoration:underline;" target="_blank" href="$&" tmpxx="tmpxx">$&</a>'
);
text=text.replace(/href="!xvvvx!/g,'href="https://');
text=text.replace(/href="!yvvvy!/g,'href="http://');
text=text.replace(/tmpxx">!wvvvw!/g,'tmpxx">https://');
text=text.replace(/tmpxx">!zvvvz!/g,'tmpxx">http://');
obj.innerHTML = text;
var ol=obj.querySelectorAll("ol");
var len=ol.length;
for (var a=0;a<len;a++){ol[a].innerHTML=b[a];}
text=text.replace(/ <div>/g,'<div>');
text=text.replace(/ <\/div>/g,'</div>');
var a=obj.querySelectorAll("a");
var len=a.length;
for (var i=0;i<len;i++){
//console.log('before:',a[i].getAttribute('href'),a[i].href);
var tmp=a[i].getAttribute('href').split('<');
a[i].setAttribute('href',tmp[0]);
}
return 0;
}

this code is not runnable, u can add some div block for contenteditable='tru', then

run this code on 'ASK" question

hope it help

Accepted Solution

Expert: Wilson Edwards replied at 2024-08-29 16:48:58

500 points Excellent

I got some function tested before long-time ago, u can try it , it can convert during editing or add 1 by 1, then covert it by clicking some button....

function paste_href(){
var obj=document.getElementById('youreditable_div_id') ;var b=[];
var ol=obj.querySelectorAll("ol");//ol tag not convert it
var len=ol.length;
for (var a=0;a<len;a++){b[a]=ol[a].innerHTML;ol[a].innerHTML="";}
var text = obj.innerHTML;
text=text.replace(/<div>/g,' <div>');
text=text.replace(/<\/div>/g,' </div>');
text=text.replace(/href="https:\/\//g,'href="!xvvvx!');
text=text.replace(/href="http:\/\//g,'href="!yvvvy!');
text=text.replace(/tmpxx">https:\/\//g,'tmpxx">!wvvvw!');
text=text.replace(/tmpxx">http:\/\//g,'tmpxx">!zvvvz!');
text = text.replace(
/(http(s?):\/\/)([^ ]+)/g,
'<a style="color:blue;text-decoration:underline;" target="_blank" href="$&" tmpxx="tmpxx">$&</a>'
);
text=text.replace(/href="!xvvvx!/g,'href="https://');
text=text.replace(/href="!yvvvy!/g,'href="http://');
text=text.replace(/tmpxx">!wvvvw!/g,'tmpxx">https://');
text=text.replace(/tmpxx">!zvvvz!/g,'tmpxx">http://');
obj.innerHTML = text;
var ol=obj.querySelectorAll("ol");
var len=ol.length;
for (var a=0;a<len;a++){ol[a].innerHTML=b[a];}
text=text.replace(/ <div>/g,'<div>');
text=text.replace(/ <\/div>/g,'</div>');
var a=obj.querySelectorAll("a");
var len=a.length;
for (var i=0;i<len;i++){var tmp=a[i].href.split('<');a[i].href=tmp[0];}
return 0;
}

Hope it works for your case

新聞財經娛樂♬資訊 News Economy

About Us|Service|Pricing

Stock Index全球即時指數期貨:

&nbps;

News即時新聞:↓

News即時新聞:↑

On Balance Volume (OBV):

Youtube Video♬ Sharing by members:↓

Youtube Video♬ Sharing by members:↑

Ask Question Forum:

how to convert https link on textarea into <a> tag during editing on <div> block

Your Information

Members/Profolio