在 textarea 或 pre 中键入时格式化颜色

Question

我正在尝试创建一个允许用户@someone 的评论部分。当用户输入 @random 然后输入 space 时，我希望它突出显示。所以我创建了一些搜索和替换字符串的东西，但是当 html 被替换时，它会将光标放在开头。有什么办法可以解决这个问题？还有其他方法可以做这样的事情吗？

$('#textarea').keyup(function() {
  txt = this.innerText.split(" ")
  new_txt = this.innerText
  for (var i = txt.length - 1; i >= 0; i--) {
    if (txt[i].startsWith('@') == false) {
      delete txt[i]
    }
  }
  txt = txt.sort().join(" ").trim().split(" ")
  console.log(txt)
  if (txt.length > 0 && txt[0] != "") {
    for (var i = 0; i < txt.length; i++) {
      new_txt = new_txt.replace(txt[i], '<mark>' + txt[i] + '</mark>')
    }
    $('#my_console_log').text(new_txt)
    this.innerHTML = new_txt
  }
});

pre {
  border: solid black 1px;
}

mark {
  background: blue;
  color: red;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<title>Test page</title>
<form>
  <pre id='textarea' contentEditable='true'></pre>
  <div id="my_console_log"></div>
</form>

Answer 1

不要替换 html，只需将 class 附加到您想要的颜色即可

Answer 2

这里有一个简单的 plugin 可用，可能对您有用，下载插件并编辑文件 jquery.hashtags.js 并删除 # 的条件。您也可以根据需要更改样式。

(function($) {
$.fn.hashtags = function() {
    $(this).wrap('<div class="jqueryHashtags"><div class="highlighter"></div></div>').unwrap().before('<div class="highlighter"></div>').wrap('<div class="typehead"></div></div>');
    $(this).addClass("theSelector");
    autosize($(this));
    $(this).on("keyup", function() {
        var str = $(this).val();
        $(this).parent().parent().find(".highlighter").css("width",$(this).css("width"));
        str = str.replace(/\n/g, '<br>');
        if(!str.match(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?#([a-zA-Z0-9]+)/g) && !str.match(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?@([a-zA-Z0-9]+)/g) && !str.match(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?#([\u0600-\u06FF]+)/g) && !str.match(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?@([\u0600-\u06FF]+)/g)) {

            // Remove below condition for hashtag.
            if(!str.match(/#(([_a-zA-Z0-9]+)|([\u0600-\u06FF]+)|([ㄱ-ㅎㅏ-ㅣ가-힣]+)|([ぁ-んァ-ン]+)|([一-龯]+))#/g)) { //arabic support, CJK support
                str = str.replace(/#(([_a-zA-Z0-9]+)|([\u0600-\u06FF]+)|([ㄱ-ㅎㅏ-ㅣ가-힣]+)|([ぁ-んァ-ン]+)|([一-龯]+))/g,'<span class="hashtag">#</span>');
            }else{
                str = str.replace(/#(([_a-zA-Z0-9]+)|([\u0600-\u06FF]+)|([ㄱ-ㅎㅏ-ㅣ가-힣]+)|([ぁ-んァ-ン]+)|([一-龯]+))#(([_a-zA-Z0-9]+)|([\u0600-\u06FF]+)|([ㄱ-ㅎㅏ-ㅣ가-힣]+)|([ぁ-んァ-ン]+)|([一-龯]+))/g,'<span class="hashtag">#</span>');
            }

            // Keep this condition.
            if(!str.match(/@(([a-zA-Z0-9]+)|([\u0600-\u06FF]+)|([ㄱ-ㅎㅏ-ㅣ가-힣]+)|([ぁ-んァ-ン]+)|([一-龯]+))@/g)) {
                str = str.replace(/@(([a-zA-Z0-9]+)|([\u0600-\u06FF]+)|([ㄱ-ㅎㅏ-ㅣ가-힣]+)|([ぁ-んァ-ン]+)|([一-龯]+))/g,'<span class="hashtag">@</span>');
            }else{
                str = str.replace(/@(([a-zA-Z0-9]+)|([\u0600-\u06FF]+)|([ㄱ-ㅎㅏ-ㅣ가-힣]+)|([ぁ-んァ-ン]+)|([一-龯]+))@(([a-zA-Z0-9]+)|([\u0600-\u06FF]+)|([ㄱ-ㅎㅏ-ㅣ가-힣]+)|([ぁ-んァ-ン]+)|([一-龯]+))/g,'<span class="hashtag">@</span>');
            }
        }
        $(this).parent().parent().find(".highlighter").html(str);
    });
    $(this).parent().prev().on('click', function() {
        $(this).parent().find(".theSelector").focus();
    });

};
})(jQuery);

在 textarea 或 pre 中键入时格式化颜色

Format color while typing in textarea or pre

html

javascript

jquery

textarea

pre