Удалить слово между @ и carret - PullRequest
Новая
       18

Удалить слово между @ и carret

0 голосов
/ 05 ноября 2018

После поиска почти всех вопросов, касающихся того, как удалить текст между символом, таким как @, и позицией carret в contenteditable div, я почти пришел к выводу, что этот вопрос стал невозможным для сообщества. Смотрите следующий вопрос, и ни один из них фактически не решил задачу удаления. Contenteditable div получает и удаляет слово, предшествующее каретке , Как получить диапазон символов между @ и каретой в contenteditable , Удалить последние x символов перед позицией символа , вернуть объект диапазона слова до или после позиции carret в contenteditable div

Я тоже застрял. То, что мы ищем, это

  1. Создать редактируемый контент div и значение кнопки = "Playing".
  2. Введите что-нибудь в contenteditable div и начните с любого символа, например, @
  3. Пример Предположим | символ представляет собой carret в предложении «Я @sch | ool с друзьями»,
  4. , поскольку слово «школа» означает слово «каррет», замените слово «школа» игрой. Помните, что символ @ больше не будет существовать.
  5. Если возможно, установите каррет после слова воспроизведения.
  6. Окончательный ожидаемый результат - предложение "Я играю с друзьями".

Некоторые из нас не знакомы с диапазоном и выбором, и мы просим о помощи. А пока позвольте мне попробовать создать скрипку. Спасибо 

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>

Ответы [ 2 ]

0 голосов
/ 05 ноября 2018

Если я правильно понимаю, то вашу проблему не невозможно решить. Вы можете попробовать подход, как я сделал ниже. По сути, вы хотите проверить введенную пользователем строку ввода для вашего символа 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>
0 голосов
/ 05 ноября 2018

Здравствуйте! Возможно, я неправильно понял вашу проблему, или у вас есть некоторые ограничения в том, как вы должны это сделать. Но простой способ сделать это - метод 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>
...