div标签内的超链接

Question

目前我的html页面中有一个div，如下所示

<html>
<head>
<title>Page Title</title>
</head>
<body>
    <p1> test </p1>
    <div id="text-input" contenteditable="true"></div>
</body>
</html>

我想要做的是，如果你在div中键入一个网站链接，它会变成一个可点击的超链接，带你到页面。 我不知道如何做到这一点，感谢帮助。 谢谢

Answer 1

不幸的是，你要做的事情并不简单。 首先，一个可点击的超链接需要一个锚标记<a>并且通过使contenteditable为true，你不能简单地输入<a>... ，你可能想要使用一些库，如QuillJS或SlateJS。

以下是QuillJS的示例，如果需要自动转换的链接，则需要使用另一个扩展Quill逻辑的库

 var quill = new Quill('#editor-container', { modules: { toolbar: [ [{ header: [1, 2, false] }], ['bold', 'italic', 'underline'], ['image', 'code-block', 'link'] ] }, placeholder: 'Compose an epic...', theme: 'snow' // or 'bubble' });

 #editor-container { height: 375px; }

 <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" /> <link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet" /> <link href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" rel="stylesheet" /> <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css" rel="stylesheet" /> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"></script> <script src="//cdn.quilljs.com/1.3.6/quill.js"></script> <div id="editor-container"> </div>

编辑：以下是与您的评论相关的简单示例 -

 $('#textinput').keyup(function() { var val = $('#textinput').val(); $('#text').html(val) });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea id="textinput" placeholder="Start typing here... "> </textarea> <div id="text"></div>

Answer 2

您可以使用正则表达式来匹配，如果它是由任何用户输入的URL，如下所示

var regExUrl = /https?:\/\/([\w\d-\.]+)?[\w\d-\.]+\.{1}[\w]{1,4}((\/{1})?)([a-zA-Z0-9&-@_\+.‌~#?\/=]*)?/gi;

var linkdiv = document.getElementById('text-input');

div.onkeyup = function () {

   if (div.innerHTML.match(regExUrl)) {

       $("linkdiv").addClass("url");

   } else {

       $("linkdiv").removeClass("url");
   }

}

$('.url').click(function(){
   window.open($(this).html(), '_blank');
});

和css你可以使用

.url{
   text-decoration: underline;
   color: blue;
   cursor:pointer;
}

Answer 3

如果你正在寻找一个纯粹的JavaScript它的东西：

<form onsubmit="return access()">
<input type="text" id="link" />
<input type="submit" value="Submit" />
</form>

<script>
function access(){
window.location = document.getElementById('link').value;
return false;
}
</script>

该函数应始终返回false以停止默认表单提交。 如果你想做一个更简单的方法，你也可以使用像jquery或angularjs这样的库。

Answer 4

使用正则表达式检查内容是否为有效链接（如果包含锚标记）。

简单用例：

如果是有效的链接
如果链接无效

使用Javascript的onChange属性。

快乐的编码！

Answer 5

这是您的纯JS解决方案：

 <html> <head> <title>Page Title</title> <style> #text-input { border-left: 4px solid green; text-indent: 7px; } </style> </head> <body> <p1> test </p1> <div id="text-input" contenteditable="true"></div> <script> let div = document.getElementById('text-input'); let anchor; div.addEventListener('blur', event => { let text = div.innerText; div.innerText = ''; anchor = document.createElement('a'); div.appendChild(anchor); anchor.innerText = text; anchor.href = text.indexOf('https://') == 0 ? text : 'https://' + text; }); </script> </body> </html>

div标签内的超链接

问题描述

5 个解决方案

解决方案1
1 已采纳 2018-09-23 05:34:13

解决方案2
1 2018-09-23 05:49:29

解决方案3
1 2018-09-23 05:55:40

解决方案4
0 2018-09-23 06:03:04

解决方案5
0 2018-09-23 06:57:56

div标签内的超链接

问题描述

5 个解决方案

解决方案1 1 已采纳 2018-09-23 05:34:13

解决方案2 1 2018-09-23 05:49:29

解决方案3 1 2018-09-23 05:55:40

解决方案4 0 2018-09-23 06:03:04

解决方案5 0 2018-09-23 06:57:56

解决方案1
1 已采纳 2018-09-23 05:34:13

解决方案2
1 2018-09-23 05:49:29

解决方案3
1 2018-09-23 05:55:40

解决方案4
0 2018-09-23 06:03:04

解决方案5
0 2018-09-23 06:57:56