Question

我想通过点击功能替换标签。但是现在我的整个@正在被我的功能所取代。我只想替换最后输入的@。我可以使用@找到最后lastIndexOf，但问题是用户可以在文本之间输入。所以这就是问题，我们如何知道最后输入@的位置。 Fiddle

<div class="text" contenteditable="true"></div>
<div class="tags">
    <span>tag</span>
        <span>jimmy</span>
        <span>mike</span>
        <span>jonny</span>
</div>

JQuery的

$('.tags span').click(function(){
var html= $('.text').html()
var dd= html.replace('@','<span class="tag">'+$(this).text()+'</span>')
$('.text').html(dd);
})

Answer 1

您可以尝试lastIndexOf和substr这样的方法http://jsfiddle.net/seuok4r5/7/

Answer 2

我也尝试了一些东西，看看配偶

if id == "parent1"{
    //do something
} else {
    //do something else
}

https://jsfiddle.net/punkhaa/796nsvsv/1/

Answer 3

我会通过keyup事件记录最后一个光标位置 - 这样你总能知道你需要修改哪个@符号。

var lastPos = null;
$('.text').keyup(function() { 
  // Get the cursor position, and record it
  lastPos = window.getSelection().getRangeAt(0).startOffset;
  console.log("Cursor: " + lastPos);
});

$('.tags span').click(function(){
  
  // find the first occurance of @ before the lastPos
  var html= $('.text').html()
  var index = html.lastIndexOf("@", lastPos - 1); // find any @ before the cursor position
  console.log("@Index: " + index);
  
  if (index >= 0) {
    var tag = '<span class="tag">'+ $(this).text() + '</span>&nbsp;';

    // slice the result, to remove the @, and add the span
    html = html.substr(0, lastPos - 1) + tag + html.substr(lastPos + 1, html.length);
    
    // replace in the div
    $('.text').html(html);
  }

})

.text {border:solid 1px #000; height:100px}
.tags{ padding-top:10px}
.tags span{background:#ff0000;color:#fff; display:inline-block; padding:5px}

.tag{background:#ff0000;color:#fff; display:inline-block; padding:5px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="text" contenteditable="true"></div>

<div class="tags">
    <span>tag</span>
        <span>jimmy</span>
        <span>mike</span>
        <span>jonny</span>
</div>

将最后输入的@替换为span

3 个答案: