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

您可以做些什么，如果正则表达式由任何用户键入，则可以使用正则表达式进行匹配

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，则类似：

Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void hani.momanii.supernova_emoji_library.Helper.EmojiconEditText.setOnFocusChangeListener(android.view.View$OnFocusChangeListener)' on a null object reference
    at hani.momanii.supernova_emoji_library.Actions.EmojIconActions.setFocusListener(EmojIconActions.java:241)
    at hani.momanii.supernova_emoji_library.Actions.EmojIconActions.<init>(EmojIconActions.java:64)
    at dev.edmt.chatapp.ChatFragment.onCreate(ChatFragment.java:60)

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

Answer 4

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

简单用例：

如果有效链接
如果链接无效

使用Java的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 个答案: