Question

在搜索了几乎所有有关如何删除诸如contenteditable div中的@等字符和carret位置之间的文本的问题之后，几乎可以断定，这个问题已成为社区无法解决的问题。看到以下问题，但没有一个实际解决了删除任务。 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和一个value =“ playing”按钮。
在contenteditable div中键入任何内容，并以任何字符开头，例如@
示例假设|符号代表句子“我是@sch |与朋友一起的ool”中的小甜菜，
由于小字在“学校”一词上，因此将“ @school”一词替换为“ playing”。记住@符号也将不再存在。
如果可能的话，在打出单词后设置字型。
最终的预期结果是句子“我正在和朋友一起玩”。

我们中的一些人不熟悉范围和选择，特此寻求帮助。同时，让我尝试创建一个小提琴。谢谢

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之间的单词

2 个答案: