logo标签列表

div标签内的超链接

javascripthtml
4

目前我在HTML页面中有一个如下所示的

。

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

我想实现的功能是，如果在div中输入一个网站链接，它会变成可点击的超链接，带您进入该网页。我不知道如何做到这一点，希望能得到帮助。谢谢。

我已经发布了一个纯JS解决方案，不需要任何库，并且可以完全满足您的需求。 - vrintle
5个回答
1
你可以使用正则表达式匹配任何用户输入的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;
}
1
如果您正在寻找纯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。

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>

能否将contenteditable div中的所有内容镜像到类似于<p1>（或任何其他）标记中，以便如果用户键入了URL，则该标记具有超链接？ - YYY
你肯定可以将你在div中输入的内容镜像到另一个元素中，此时，你应该使用<textarea>而不是div contenteditable。然而问题在于，你仍然需要能够处理文本以自动添加<a>标签。也许可以用正则表达式来实现。但是话说回来，如果你手动输入<a>...，它仍然可以工作。 - Konda
我已经添加了一个简单的镜像示例。 - Konda
0
使用正则表达式检查内容是否为有效链接，如果是，则用锚标签包围它。
简单应用场景：

  1. 如果是有效链接

  2. 如果是无效链接

玩转JavaScript的onChange属性。
愉快编程！
0

这是您的纯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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接