jQuery .replaceWith() 将 's 添加到字符串

Question

我在将 colon-nation 表情符号转换为 svg 图像的评论系统中使用 imojify。

用户可以通过点击评论来编辑评论。
为了保留表情符号，我将现有的 <span class="emoji emoji-laughing" title=":laughing:"></span> 替换为本例中的跨度标题 :laughing: 并在编辑评论后调用 imojify 功能，使其再次变为 svg。

我注意到一个奇怪的行为，如果表情符号在评论的末尾，你点击那里并按下退格键来编辑它，有几个   添加到字符串中。为什么是这样？以及如何删除它们。

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

这是代码（这个例子只有 2 个）
尝试点击我的 post 中 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

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

$('.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;
}

<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:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">test</span>
    </p>
  </div>
</div>

Answer 2

&nbsp 出现是因为你给p 标签设置了padding，也就是内容可编辑。要解决此问题，请将 padding 设置为 0 并在 .comment class 上进行双倍填充，从 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>

jQuery .replaceWith() 将 's 添加到字符串

jQuery .replaceWith() adds  's to string

javascript

jquery

replacewith

jQuery .replaceWith() 将 's 添加到字符串

jQuery .replaceWith() adds &nbsp;'s to string

javascript

jquery

replacewith

jQuery .replaceWith() adds 's to string