Question

我希望textarea中具有hash＃字符的文本在键入时用锚链接替换。

例如。 #somethingelse somethingsomethingelse其实际代码将是

某事＆lt; a href =“/ tags /＃somethingelse”class =“hashtag”＆gt;＃somethingelse＆lt; / a＆gt; somethingelse

但是在textarea中，我只想要#somethingelse被突出显示，因为我不希望它实际上有锚码，有点像twitter和fb这样做。

它是如何运作的？

$('textarea').on("keyup", function() {
  var str = $(this).val();
  if (!str.match(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?#([a-zA-Z0-9]+)/g)) {
    if (!str.match(/#([a-zA-Z0-9_]+)#/g)) {
      str = str.replace(/#([a-zA-Z0-9_]+)/g, '<a href="/tags/#$1" class="hashtag">#$1</a>');
        $('textarea').html(str)
      }
    }
});

.hashtag {
  background: #000;
  color: #fff;
}

Answer 1

我用javascript编写：

Html：

<textarea id="textArea" onkeyup="changeHash()"></textarea>

Javascript：

var outputString="";

function changeHash(){
var getObject= document.getElementById('textArea');
outputString =getObject.value.toString();
var checkTheLastChar = outputString.slice(-1);
if(checkTheLastChar=="#"){
 outputString = outputString.substring(0, outputString.length - 1);
 outputString += "⚓"; //Change it with anything you want
}
getObject.value = "";
getObject.value = outputString; 
}

https://jsfiddle.net/emilvr/q27xgshe/1/

Answer 2

您需要做的是在透明文本区域下方放置一个div，并将文本从textarea复制到div中并附加链接。如果您将html标记的文本附加到文本区域，则它不会呈现，因为textarea中的任何内容只会呈现为可编辑的文本。

用锚链接实时替换主题标签

2 个答案: