自动检测 textarea 字段中的链接

Question

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

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

假设此输入字段用于做笔记并保存在那里（更像是 google 保留）。因此，当用户在输入字段中输入任何 'links' 时，link 将显示为纯文本而不是 hyperlink。 link 也没有像往常一样突出显示。

---输入字段我用 link- 'https://whosebug.com/' 保存了一个注释但是当显示注释时

> https://whosebug.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="" target="_blank"></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, '<div contentEditable="false" style="display: inline-block; padding: 5px;"><a href="http://" target="_blank"></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:"></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>

Whosebug 已阻止

自动检测 textarea 字段中的链接

Autodetect links in textarea field

html

hyperlink

textarea