自动检测文本区域字段中的链接

Question

如何突出显示文本区域中的超链接。 我创建了一个如下所示的标签，

     <textarea
        class="textarea"
        name="input_note"
        id=""
        cols="30"
        rows="10"
      ></textarea>

假设这个输入字段用于记笔记并保存在那里（更像是谷歌保留）。因此，当用户在输入字段中输入任何“链接”时，链接将显示为纯文本而不是超链接。该链接也不像通常那样突出显示。

---输入字段我已保存了带有链接的注释 - 'https://stackoverflow.com/' 但是当显示注释时，

> https://stackoverflow.com/

会显示纯文本并且不可单击。

Answer 1

这段代码应该可以工作。我必须用 div 替换 textarea，因为它不可能在 textarea 中执行您想要的操作，但我给了它样式，使其看起来就像 textarea 一样。

function linkify(inputText) {
  var replacedText, replacePattern1, replacePattern2, replacePattern3;
  if (inputText.indexOf("<a ")) {
    //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    replacedText = inputText.replace(replacePattern1, '<div contentEditable="false" style="display: inline-block; padding: 5px;"><a href="$1" target="_blank">$1</a></div>');

    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1<div contentEditable="false" style="display: inline-block; padding: 5px;"><a href="http://$2" target="_blank">$2</a></div>');

    //Change email addresses to mailto:: links.
    replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
    replacedText = replacedText.replace(replacePattern3, '<div contentEditable="false" style="display: inline-block; padding: 5px;"><a href="mailto:$1">$1</a></div>');
  } else {
    replacedText = inputText;
  }
  alert(replacedText)
  return replacedText;
}

.textarea {
  border: 1px solid gray;
  min-height: 50px;
  /* if you want Flexible textarea/div then give min-height instead of height */
  overflow: auto;
  padding: 2px;
  resize: both;
  width: 400px;
  font-size: 15px;
  color: #000;
}

<div class="textarea" name="input_note" id="textarea" cols="30" rows="10" contenteditable onblur="  var text = document.getElementById('textarea').innerHTML;var text = linkify(text);document.getElementById('textarea').innerHTML = text;"></div>

Stackoverflow has blocked <a tags so you wont be able to go to a website if u try to run the snippet. Copy the code in the file and it would work.