I want to parse "string" and search "url" of various types like "href", "image", "youtube", "vimeo", "hashtag", "mention" with @
and convert them into "HREF" as well as other formats like iframe, "img" when available.
Following is my code, which is not working as it is supposed to be:
function convertLink(article) {
var cArticle = "";
cArticle = article.replace(/(?:(https?):\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?([^\ \r\n]+)/g, '<div id="$2" class="anotherClass" onclick="someFunction(\'$2\', \'$2\');"><img class="some-class" src="https://i.ytimg.com/vi/$2/0.jpg"></div>')
.replace(/(?:(https?):\/\/)?(?:www\.)?(?:vimeo\.com)\/([^\ \r\n]+)/g, '<div class="video-container"><iframe src="//player.vimeo.com/video/$2" width="100%" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>')
.replace(/([\s+])@([^\s]+)/g, " <a href='https:\/\/example.com/$2'>@$2</a>").replace(/([\r\n])/ig, "<br>")
.replace(/([\s+])#([^\s]+)/g, " <a href='https:\/\/example.com/#2'>#$2</a>").replace(/([\r\n])/ig, "<br>")
.replace(/(\<br\>\<br\>)/, "<br>");
return cArticle;
}
It only converts youtube link and ignores other following links.
Example of String:-
In this article, we will be talking about Some of the interesting facts like:
Youtube Flutter https://youtube.com/watch?v=someVideoID as well as https://example.com/images.jpg, https://vimeo.com/someVideoID and #rain @stackoverflow more coming soon at https://example.com/link/me Let's talk.
To get Converted to semi-html as below:-
In this article, we will be talking about some of the interesting facts like: <span class="someClass" onclick="someFunction(videoID)"><img src="https://.ytimg.com/vi/{vidoeID}/0.jpg"></span> as well as <img class="imgClass" src="https://example.com/images.jpg" /> , <div class="video-container"><iframe src="//player.vimeo.com/video/"></iframe></div> and <a href="https://example.com/#rain">#rain</a> <a href="https://example.com/@stackoverflow">@stackoverflow</a> and more coming soon at <a href="https://example.com/link/me">https://example.com/link/me</a>
So, if you see -
-
https://example.com/images.jpg => becomes =>
<img class="imgClass" src="https://example.com/images.jpg" /> -
https://youtube.com/watch?v=someVideoID => becomes =>
<span class="someClass" onclick="someFunction(videoID)"><img src="https://.ytimg.com/vi/{vidoeID}/0.jpg"></span> -
#rain => becomes =>
<a href="https://example.com/#rain">#rain</a> -
@stackoverflow => becomes =>
<a href="https://example.com/@stackoverflow">@stackoverflow</a> -
https://example.com/link/me => becomes =>
<a href="https://example.com/link/me">https://example.com/link/me</a>
image text link, youtube, Vimeo, and text link is converted to img, iframe and HTML link
JsFiddle link here for Live Testing - https://jsfiddle.net/thadg3uf/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Convert Link</title>
</head>
<body>
<span id="demo"></span>
<script>
function convertLink(article) {
var cArticle = "";
cArticle = article.replace(/(?:(https?):\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?([^\ \r\n]+)/g, '<div id="$2" class="anotherClass" onclick="someFunction(\'$2\', \'$2\');"><img class="some-class" src="https://i.ytimg.com/vi/$2/0.jpg"></div>').replace(/(?:(https?):\/\/)?(?:www\.)?(?:vimeo\.com)\/([^\ \r\n]+)/g, '<div class="video-container"><iframe src="//player.vimeo.com/video/$2" width="100%" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>').replace(/([\s+])@([^\s]+)/g, " <a href='https:\/\/example.com/$2'>@$2</a>").replace(/([\r\n])/ig, "<br>").replace(/([\s+])#([^\s]+)/g, " <a href='https:\/\/example.com/#2'>#$2</a>").replace(/([\r\n])/ig, "<br>").replace(/(\<br\>\<br\>)/, "<br>");
return cArticle;
}
var stringIs = "In this article, we will be talking about Some of the interesting facts like: Youtube Flutterhttps://www.youtube.com/watch?v=i-Qy1VQUMuI as well as https://example.com/images.jpg, https://vimeo.com/259411563 and #rain @stackoverflow more coming soon at https://example.com/link/me Let's talk.";
document.getElementById("demo").innerHTML = convertLink(stringIs);
</script>
</body>
</html>Strictly No jQuery with XSS filter to avoid any XSS attack
from Convert Text link to Multiple HTML Format in Javascript with XSS Filter
No comments:
Post a Comment