Say if the string returns:
str = `
https://www.google.com
http://google.com
https://www.youtube.com/live/gNIQWYgf-0
https://youtube.com/watch?v=3ul2LYG6j14%3Fsi%3DfgxYHjyt6zBmoYEr
https://youtu.be/75Dhfjf6hfjfj
this also has to take into account the variations of different youtube urls
`
so when this string comes back I want to wrap the anchor tags for:
<a href="https://www.google.com">https://www.google.com</a>
<a href="https://google.com">https://www.google.com</a>
and wrap the YouTube with iframe tags:
<iframe width="420" height="315" src="https://youtu.be/75Dhfjf6hfjfj"></iframe>
<iframe width="420" height="315" src="https://www.youtube.com/embed/3ul2LYG6j14?si=fgxYHjyt6zBmoYEr"></iframe>
I asked this question using the react-native-pell-rich-editor in react-native, because i tried with this method and did not work, im trying with a webview. This question was asked here How do replace urls and youtube urls and replaces the urls as anchor tags and replace youtube urls as Iframe tags
Here is my code:
<WebView source={{
html: `
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<style>
[contentEditable=true]:empty:not(:focus):before {
content: attr(data-text);
cursor: text;
color: red;
pointer-events:none;
}
#placeholder{
position:absolute;
color:#BDBDBD;font-size:46px;outline:none;
}
#contentHtml{
position:absolute;
color:black;font-size:46px;outline:none;width:100%;
}
</style>
<div id="contentHtml" contenteditable=true>
</div>
<div id="placeholder">
Enter Comment...
</div>
</body>
</html>
<script>
$("#placeholder").on("click", function(){
//alert("ddd");
$("#contentHtml").focus();
$(this).hide();
})
$("#contentHtml").on("keyup", function(){
//alert("ddd");
if($("#contentHtml").text().length == 0){
$("#placeholder").show();
}else{
$("#placeholder").hide();
}
})
</script>
`,
}}
style={{
width: '100%',
height: '100%',
fontSize:46,
}}>
</WebView>
I have managed to get the placeholder working using 2 divs and works ok with the jQuery events, but now I am on the task to take the string from #contentHtml and convert the standard URLs as anchor tags and YouTube URLs as iframe tags.
How can this be achieved in javascript?