如果字符串返回：
str = ``
https://www.google.com
http://google.com
https://www.youtube.com/live/gNIQWYgf-0
https://www.youtube.com/embed/3ul2LYG6j14?si=fgxYHjyt6zBmoYEr
https://youtu.be/75Dhfjf6hfjfj
这还必须考虑到不同 Youtube 网址的差异
`
因此，当该字符串返回时，我希望为以下内容包装锚标记：
<a href="https://www.google.com">https://www.google.com</a>；
<a href="https://google.com">https://www.google.com</a>；
并使用 iframe 标记包装 YouTube：
<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>；
我使用 react-native 中的 react-native-pell-rich-editor 提出了这个问题，因为我尝试了这种方法，但没有成功，所以我尝试使用 webview。这个问题是在这里提出的 如何替换 urls 和 youtube urls 并将 urls 替换为锚标签，以及将 youtube urls 替换为 Iframe 标签
以下是我的代码：
<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>；
[contentEdditable=true]:empty:not(:focus):before {
content: attr(data-text)；
cursor: text；
color: red；
pointer-events:none；
}
#placeholder{
位置：绝对；
color:#BDBDBD;font-size:46px;outline:none；
}
#contentHtml{
位置：绝对
color:black;font-size:46px;outline:none;width:100%；
}
</style>；
<div id="contentHtml" contenteditable=true>；
</div>；
<div id="placeholder">；
输入评论...
</div>；
</body>；
</html>；
<script>；
$("#placeholder").on("click", function(){
//alert("ddd")；
$("#contentHtml").focus()；
$(this).hide()；
})
$("#contentHtml").on("keyup", function(){)
//alert("ddd")；
if($("#contentHtml").html().length == 0){
$("#placeholder").show()；
}else{
$("#placeholder").hide()；
}
})
</script>；
`,
}}
style={{
width: '100%'、
height: '100%'、
fontSize:46、
}}>；
我已设法使用 2 个 div 获得了占位符，并可通过 jQuery 事件正常工作，但现在我的任务是获取 #contentHtml 中的字符串，并将标准 URL 转换为锚标记，将 YouTube URL 转换为 iframe 标记。
如何在 javascript 中实现这一功能？
<script>
$(document).ready(function() {
function replaceContent() {
let contentHtml = $("#contentHtml");
let content = contentHtml.html();
// 使用正则表达式匹配 URL
content = content.replace(/(https?:\/\/[^\s]+)/g, function(url) {
let wrappedUrl = '';
if (url.match(/youtu\.be|youtube\.com/)) {
// 如果是 YouTube 链接，则将其包装在 iframe 中
wrappedUrl = `<iframe width="420" height="315" src="${url.replace('watch?v=', 'embed/')}"></iframe>`;
} else {
// 否则，将其包装在锚标签中
wrappedUrl = `<a href="${url}" target="_blank">${url}</a>`;
}
return wrappedUrl;
});
// 将更新后的内容设置回 div
contentHtml.html(content);
}
// 在每次按键时调用 replaceContent 函数
$("#contentHtml").on("keyup", replaceContent);
});
</script>
这段代码做了以下几件事：
- 使用正则表达式匹配 URL： 代码使用
/(https?:\/\/[^\s]+)/g这个正则表达式来匹配字符串中的所有 URL。 - 区分 YouTube 和普通 URL： 代码使用
.match(/youtu\.be|youtube\.com/)来判断一个 URL 是否是 YouTube 链接。 - 包装 URL：
- 对于 YouTube 链接，代码将其包装在一个
<iframe>标签中，并设置宽度和高度。同时，代码还会将watch?v=替换为embed/，以确保视频能够正确嵌入。 - 对于其他 URL，代码将其包装在一个
<a>标签中，并设置target="_blank"属性，以便在新标签页中打开链接。 - 更新内容： 最后，代码使用
.html(content)将更新后的内容设置回#contentHtmldiv。
通过在每次按键时调用 replaceContent 函数，这段代码可以实时地将用户输入的 URL 转换为链接或嵌入式视频。