javascript - 删除@和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

---

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

1. 创建一个内容可编辑的 div 和一个按钮 value="playing"。
2. 在 contenteditable div 中输入任何内容并以任何字符开头，例如 @
3. 示例假设 |符号代表句子“我是@sch|ool with friends”中的carret，
4. 由于carret 在单词school 上，所以将@school 替换为playing。记住@符号也将不复存在。
5. 如果可能，请在播放单词后设置音符。
6. 最终的预期结果是一句“我在和 friend 一起玩”。

---

---

我们中有些人不熟悉范围和选择，我们特此请求帮助。同时，让我尝试创建一个 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>