Javascript 使用Jquery实现hashtag

我想做的基本上是，每当我写任何以#开头的东西时，标记字符串的颜色应该立即更改为其他颜色，比如蓝色。当我按空格键结束字符串时，颜色应该会变回黑色。我在contenteditable div上尝试了这样的逻辑：

    if (# is pressed) 
    hashtagging = true
    append "<span>" to div

    if (space is pressed and hashtagging is true) 
    hashtagging = false
    append "</span>" to div

如果（#被按下）
hashtagging=true
将“”附加到div
if（按下空格且hashtagging为true）
hashtagging=false
将“”附加到div

---

这不是预期的效果

像这样的事情应该可以：

$(function() {

    var hashtags = false;

    $(document).on('keydown', '#myInputField', function (e) {        
        arrow = {
            hashtag: 51,
            space: 32
        };

        var input_field = $(this);
        switch (e.which) {
            case arrow.hashtag:
                input_field.val(input_field.val() + "<span class='highlight'>");
                hashtags = true;
                break;
            case arrow.space:
                if(hashtags) {
                    input_field.val(input_field.val() + "</span>");
                    hashtags = false;
                }
                break;
        }

    });

});

$（函数（）{
var hashtags=false；
$（文档）.on（'keydown'，'#myInputField'，函数（e）{
箭头={
标签：51，
空格：32
};
变量输入_字段=$（此字段）；
开关（e.which）{
case arrow.hashtag：
input_field.val（input_field.val（）+）；
hashtags=true；
打破
大小写箭头。空格：
if（hashtags）{
input_field.val（input_field.val（）+）；
hashtags=false；
}
打破
}
});
});

---

现在，这段代码检查keydown是否按下了hashtag或space，并添加一个span，其中包含一个用于设置样式的类。检查keydown而不是keyup的原因是在将实际输入添加到文本字段之前添加标记。我使用了一个文本字段作为输入，但可以根据需要对其进行修改。

下面是一个工作示例，通过将Sondre给出的解决方案与_Green（）给出的解决方案合并，将插入符号放在末尾

var hashTagList=[]；
函数logHashList（）{
hashTagList=[]；
$（'.highlight'）。每个（函数（）{
hashTagList.push（this.innerHTML）；
});
for（var i=0；ihashTagList.length；i++）{
警报（hashTagList[i]）；
}
if（hashTagList.length==0）{
警报（“您尚未键入任何哈希标记”）；
}
}
$（函数（）{
var hashtags=false；
$（document）.on（'keydown'，'#example one'，函数（e）{
箭头={
标签：51，
空格：32
};
变量输入_字段=$（此字段）；
开关（e.which）{
case arrow.hashtag：
e、 预防默认值（）；
input_field.html（input_field.html（）+“#”）；
placeCaretAtEnd（本）；
hashtags=true；
打破
大小写箭头。空格：
if（hashtags）{
e、 预防默认值（）；
input_field.html（input_field.html（）+）；
placeCaretAtEnd（本）；
hashtags=false；
}
打破
}
});
});
函数placeCaretAtEnd（el）{
el.focus（）；
if（typeof window.getSelection！=“未定义”&&typeof document.createRange！=“未定义”）{
var range=document.createRange（）；
范围。选择节点内容（el）；
范围。塌陷（假）；
var sel=window.getSelection（）；
选择removeAllRanges（）；
选择添加范围（范围）；
}else if（typeof document.body.createTextRange！=“未定义”）{
var textRange=document.body.createTextRange（）；
textRange.moveToElementText（el）；
textRange.collapse（false）；
textRange.select（）；
}
}

展示您目前所拥有的功能。Psuedo-code按字面意思使用时往往无法正常工作；）请发布你的实际代码。这或多或少像下面的答案。这不太好用。因为html标记不能附加到文本区域或输入字段。我们必须使用contenteditable=“true”的div。但是对于这一点，.val（）方法不起作用。如果改为使用.html（），则插入符号跳到输入的开头。虽然这正是我一直在寻找的。text（）和.html（）都有一种奇怪的倾向，即在contenteditable div中将插入符号发送到开头。@shival是的，好吧，我假设您使用的是textfield或textarea，并将其输出到其他地方，但我现在看到您提到您在contenteditable div上完成了此操作。很抱歉没有正确阅读问题。我并没有太多地使用它，所以不能100%确定这将如何以最好的方式转换为contenteditable，但希望您至少可以使用一些代码使其工作。contenteditable是一个痛苦的工作，但只是为了好玩，我创建了一个解决方案，它使用一个隐藏的textarea，并将输出显示到一个div。我知道这不是你想要的，但如果有什么好处的话，这里有一把小提琴是的，除此之外，我不明白为什么在使用.text（）或.html（）后插入符号的位置必须改变。我使用了一个javascript函数，将插入符号的位置设置为末尾，并将您的解决方案与该函数混合。它现在工作得很好，不过还是有点问题。我正在努力。

var hashTagList = [];

function logHashList(){
    hashTagList = [];
    $('.highlight').each(function(){
        hashTagList.push(this.innerHTML);
    });
    for(var i=0;i<hashTagList.length;i++){
        alert(hashTagList[i]);
    }
    if(hashTagList.length==0){
        alert('You have not typed any hashtags');
    }
}
$(function() {

    var hashtags = false;

    $(document).on('keydown', '#example-one', function (e) {        
        arrow = {
            hashtag: 51,
            space: 32
        };

        var input_field = $(this);
        switch (e.which) {
            case arrow.hashtag:
                e.preventDefault();
                input_field.html(input_field.html() + "<span class='highlight'>#");
                placeCaretAtEnd(this);
                hashtags = true;
                break;
            case arrow.space:       
                if(hashtags) {         
                    e.preventDefault();
                    input_field.html(input_field.html() + "</span>&nbsp;");    
                    placeCaretAtEnd(this);
                    hashtags = false;
                }
                break;
        }

    });

});


function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}