jQuery .replaceWith（）向字符串添加

Question

我在评论系统中使用imojify，该系统可将冒号表情符号转换为svg图像。

如果用户单击评论，则可以对其进行编辑。
为保持表情符号，在这种情况下，我用跨度标题<span class="emoji emoji-laughing" title=":laughing:"></span>替换了现有的:laughing:，并在编辑注释后再次调用imojify函数，使其再次变为svg。

如果注释的末尾是表情符号，并且您单击该按钮并按退格键进行编辑，则我发现一个奇怪的行为是在字符串中添加了多个 。 为什么是这样？以及如何删除它们。

这是创建的字符串
lorem ipsum :grimacing:                                    

这里有代码（在此示例中只有2个）
尝试在我的帖子中p的最后点击并点击退格键。将添加2个 

$('.comments').on('mousedown', '.comment p', function(){
  editComment($(this));
});

function editComment(el) {
  $(el).children('span').each(function(){
    var emoji = $(this).attr('title');
    $(this).replaceWith(emoji);
  });
}

.comments {
	min-height: 45px;
	width: 100%;
	display: flex;
	flex-direction: row;
	padding: 0 20px;
}

.comment {
	padding: 7px 10px;
	display: flex;
	align-items: center;
	background: #efefef;
}

.comment p {
	line-height: 30px;
	font-size: 16px;
	padding: 0 10px;
}

.comment p:focus {
	background: #fff;
}

.emoji {
	width: 1.4em;
	height: 1.4em;
	position: relative;
	top: 0.15em;
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0;
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/124740/1f62c.svg);
}

<script src="https://www.ice-creme.de/js/imojify.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comments">
	<div class="comment">
		<p contenteditable="true">
			lorem ipsum 
			<span class="emoji emoji-grimacing" title=":grimacing:"></span>
		</p>
	</div>
</div>

Answer 1

&nbsp的出现是因为您已为p标签设置了填充，该标签是可编辑的内容。要解决此问题，请将填充设置为0，然后将.comment类的填充从padding: 7px 10px;设置为padding: 7px 20px;

$('.comments').on('mousedown', '.comment p', function(){
  editComment($(this));
});

function editComment(el) {
  $(el).children('span').each(function(){
    var emoji = $(this).attr('title');
    $(this).replaceWith(emoji);
  });
}

.comments {
	min-height: 45px;
	width: 100%;
	display: flex;
	flex-direction: row;
	padding: 0 20px;
}

.comment {
	padding: 7px 20px;
	display: flex;
	align-items: center;
	background: #efefef;
}

.comment p {
	line-height: 30px;
	font-size: 16px;
	padding: 0;
}

.comment p:focus {
	background: #fff;
}

.emoji {
	width: 1.4em;
	height: 1.4em;
	position: relative;
	top: 0.15em;
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0;
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/124740/1f62c.svg);
}

<script src="https://www.ice-creme.de/js/imojify.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comments">
	<div class="comment">
		<p contenteditable="true">
			lorem ipsum 
			<span class="emoji emoji-grimacing" title=":grimacing:"></span>
		</p>
	</div>
</div>

Answer 2

jQuery不执行您的建议。这是一个演示，显示未添加batchOps.insert(ImmutableSet.of(entity), insertOptions); 。

 

$('.comments').on('mousedown', '.comment p', editComment);

function editComment(el) {
  $(this).children('span').each(function() {
    var emoji = $(this).attr('title');
    $(this).replaceWith(emoji);
  });
}

p {
  border: 2px dashed purple;
  display: inline-block;
}

罪魁祸首是您正在使用的插件。这是另一个演示，其中手动添加了一些<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <div class=comments> <div class=comment> <p> <span class="emoji emoji-laughing" title=":laughing:">test</span> </p> </div> </div>，但是调用了 以消除空格填充。

.trim()

$('.comments').on('mousedown', '.comment p', editComment);

function editComment() {
  $(this).children('span').each(function() {
    var emoji = $(this).attr('title');
    $(this).replaceWith(emoji.trim());
  });
}

p {
  border: 2px dashed purple;
  display: inline-block;
}