Javascript jQuery.replaceWith（）添加&；nbsp'；s串

我在一个评论系统中使用，该系统将冒号表情转换为svg图像

用户可以编辑一条评论，如果他点击它。
为了保留表情符号，我将现有的

替换为span的标题，在本例中为

：笑：

，并在编辑注释后调用imojify函数，使其再次更改为svg

我注意到一个奇怪的行为，如果一个表情符号在评论的末尾，你点击那里并点击backspace编辑它，那么字符串中添加了几个

。 为什么会这样？我怎样才能去掉它们

这是创建的字符串

lorem ipsum:鬼脸：

下面是代码（本例中只有2个）

---

试着在我的帖子中点击

p

的末尾，然后点击backspace。将添加2个

$（'.comments'）.on（'mousedown'，'.commentp'，function（）{
编辑评论（$（本））；
});
函数editComment（el）{
$（el）.children（'span'）.each（function（）{
var emoji=$（this.attr（'title'）；
$（this.replacetwith（emoji）；
});
}

。注释{
最小高度：45px；
宽度：100%；
显示器：flex；
弯曲方向：行；
填充：0 20px；
}
.评论{
填充：7px 10px；
显示器：flex；
对齐项目：居中；
背景：#efef；
}
.评论p{
线高：30px；
字体大小：16px；
填充：0 10px；
}
.评论p：焦点{
背景：#fff；
}
.表情符号{
宽度：1.4em；
高度：1.4em；
位置：相对位置；
顶部：0.15em；
显示：内联块；
背景尺寸：包含；
背景重复：无重复；
背景位置：0；
背景图片：url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/124740/1f62c.svg);
}

乱数假文

jQuery没有按照您的建议执行。这是一个演示，显示没有添加

$（'.comments'）.on（'mousedown'，'.commentp'，editComment）；
函数editComment（el）{
$（this）.children（'span'）.each（function（）{
var emoji=$（this.attr（'title'）；
$（this.replacetwith（emoji）；
});
}

p{
边框：2件紫色虚线；
显示：内联块；
}

测试

出现

是因为您已将填充设置为
p
标记，该标记是可编辑的内容。要解决此问题，请将padding设置为0，并在
.comment
类上设置双padding，从
padding:7px 10px到
填充：7px 20px


$（'.comments'）.on（'mousedown'，'.commentp'，function（）{
编辑评论（$（本））；
});
函数editComment（el）{
$（el）.children（'span'）.each（function（）{
var emoji=$（this.attr（'title'）；
$（this.replacetwith（emoji）；
});
}
。注释{
最小高度：45px；
宽度：100%；
显示器：flex；
弯曲方向：行；
填充：0 20px；
}
.评论{
填充：7px 20px；
显示器：flex；
对齐项目：居中；
背景：#efef；
}
.评论p{
线高：30px；
字体大小：16px；
填充：0；
}
.评论p：焦点{
背景：#fff；
}
.表情符号{
宽度：1.4em；
高度：1.4em；
位置：相对位置；
顶部：0.15em；
显示：内联块；
背景尺寸：包含；
背景重复：无重复；
背景位置：0；
背景图片：url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/124740/1f62c.svg);
}


乱数假文

请提供一个runnable，用于复制问题。只需要几分钟。如果该脚本有cdn源，则无法在此处实现imojify。可以通过单击编辑器中的
将任何外部资源放入代码段中。或者把它放在像JSFIDLE这样的沙盒中，codepen等看起来就像是在编辑注释之前光标一直移动到最后。在编辑/添加表情符号之前，请尝试在注释字符串上使用
.trim（）
。它应该删除所有开头和结尾的空格没有cdn可悲的是，我有这个片段now@creme当前位置我只能回答你在问题中提出的问题。您的演示没有显示您描述的行为，如果添加了此类填充，则
.trim（）
将删除它。如果没有，则说明您没有准确地描述问题。@creme:您的动画gif在显示额外空间之前似乎显示了短暂的停顿。这是真的吗？不，当我点击backspace时，额外的空间就会出现。这就是为什么在我的帖子中被剪断的部分的最后会有一个短暂的停顿，然后点击backspace。会有2个，这就是问题所在。谢谢你的帮助。