删除@和carret之间的单词

Question

在搜索了几乎所有关于如何在 contenteditable div 中删除字符（如 @ 和插入符号位置）之间的文本的问题后，我几乎得出结论，社区无法解决这个问题。请参阅以下问题，但没有一个真正解决了删除任务。 Contenteditable div get and delete word preceding caret, How to get range of characters between @ and caret in contenteditable, Remove last x characters before carret position, return the range object of the word before or upon carret position in contenteditable div

我也卡住了。我们要找的是

创建一个可编辑的内容div和一个按钮值="playing"。
在 contenteditable div 中输入任何内容并以任何字符开头，例如 @
示例假设 |符号代表句子中的carret "I am @sch|ool with friends",
由于carret 在单词school 上，所以将单词@school 替换为playing。记住@符号也将不复存在。
如果可能的话，在playing这个词之后设置carret。
最终预期结果是句子"I am playing with friends"。

我们中有些人不熟悉范围和选择，我们特此请求帮助。同时，让我尝试创建一个 fiddle。谢谢

function replace_with_playing(){
  var sel='';
  if(window.getSelection){//webkits plus firefox
  var sel=document.getSelection();
 sel.modify("extend","backword","word");
 range=sel.getRangeAt( 0);
 range.deleteContents();
 var el=document.createElement('span');
 el.innerHTML='Playing';
 $(el).attr('contenteditable','false');
 var frag=document.createDocumentFragment(),node;
 while(node=el.firstChild){
  frag.appendChild(node);
 }
 range.insertNode(frag);
 range.collapse();
  //this code is appending the word playing but not deleting the word @school
  }
  else if(document.selection){//IE
  //i dont know code for IE
  }
}


$(document).on('click','.bt',function(){
var el=document.getElementById('editable_div');
replace_with_playing();
});

.parent_container{
 position:relative;
}

.editable_div{
 width:200px;
 padding:5px 10px;
 min-height:50px;
 border: 1px #DCDCDC solid;
}
.bt{
width:70px;
border:1px #000 solid;
position:absolute;
left:100px;
bottom:-30px;
background:#ffff00;
padding:2px 8px;
}
.description{
margin-top:10px;
}

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

<div class="parent_container">
 <button class="bt">playing</button>
 <div class="editable_div"id="editable_div"contenteditable>
  
  </div>
  <div class="description">Type am "@school" such that the carret is after school then click playing</div>
 
</div>

Answer 1

您好，我可能误解了您的问题，或者您在处理问题的方式上有一些限制。但一个简单的方法是使用 string.replace() 方法；

$(document).ready(function() {
  $(".bt").click(function() {
    let str = $("#editable_div p").html();
    str = replaceSchool(str, "playing");
    $("#editable_div p").html(str);
  });

  function replaceSchool(content, word) {
    return content.replace("@school", word); // you can use a regExp to catch the word starting with @
  };
})

.parent_container {
  position: relative;
}

.editable_div {
  width: 200px;
  padding: 5px 10px;
  min-height: 50px;
  border: 1px #DCDCDC solid;
}

.bt {
  width: 70px;
  border: 1px #000 solid;
  position: absolute;
  left: 100px;
  bottom: -30px;
  background: #ffff00;
  padding: 2px 8px;
}

.description {
  margin-top: 10px;
}

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<div class="parent_container">
  <button class="bt">playing</button>
  <div class="editable_div" id="editable_div" contenteditable>
    <p>Im @school with Paulo</p>
  </div>
  <div class="description">Type am "@school" such that the carret is after school then click playing</div>

</div>

Answer 2

如果我没理解错的话，你的问题不是无法解决。您可以像我在下面所做的那样尝试一种方法。基本上，您想检查用户为您的 target 字符（在本例中为“@”）提供的输入字符串。如果您在字符串中找到 target，则将 split 输出到数组的输入字符串中。一旦你有了那个数组，你就可以在它上面使用 Array.prototype.map 方法来创建一个新数组。您的 map 回调应该检查当前元素是否包含 target - 如果包含，只需将其替换为您想要的替换字符串，否则只需保持输入原样：

const divEditable = document.getElementById('editable_div');

document.getElementById('btnPlaying').addEventListener('click', function() {
  var input = divEditable.innerHTML;
  var target = '@';
  if (input.length && input.indexOf(target) > -1) {
    divEditable.innerHTML = doReplace(input, target, 'playing');
  }
});

function doReplace(input, target, replacement) {
  var words = input.split(' ').map(function(word) {
    if (word.indexOf(target) > -1) {
      return replacement;
    }
    return word;
  });
  return words.join(' ');
}

<div id="editable_div" style="height: 75px; border-style: groove;" class="editable_div" contenteditable>
</div>

<div class="description">Type am "@school" such that the carret is after school then click playing</div>

<button id="btnPlaying">playing</button>

删除@和carret之间的单词

Delete the word between @ and carret

javascript

jquery

contenteditable