Question

我想允许用户删除div标签中的单词，我只需将所有单词包装到<span>标签并定位标签即可，请参阅awesome jsFiddle 。

所以div中的句子是：

你好世界！进撃の巨人什么不是现实？

我的问题是，如何使句子始终以大写字母开头并以句号结束，除非如果句子以任何这些字符结尾：.?!'")

因此，如果用户删除了几个单词并且句子是：

世界！进撃の巨人什么不是

然后我希望它转换为：

世界！进撃の巨人什么不是。

Answer 1

尝试更新fiddle

var endChars = [".", "?", "!", "\"", "'"];

jQuery(document).ready(function() {
    jQuery('.editable span').bind("mousedown", function() {

       jQuery(this).fadeOut(function(){
          var parentObj = $(this).parent();
          $(this).remove();
          var text = parentObj.find("span").first().html();
          console.log(text);
          parentObj.find("span").first().html(capitalizeFirstLetter(text)); 
          text = parentObj.find("span").last().html();
          if ( endChars.indexOf(text.slice(-1))  == -1 )
          {
            console.log(text);
            parentObj.find("span").last().html(text+"."); 
          }
       });

    });
});

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

Answer 2

这是一个更短的解决方案：

jQuery(document).ready(function() {
  jQuery('.editable span').bind("mousedown", function() {

    jQuery(this).fadeOut(function() {

        var first = $( '.editable' ).children('span').eq(0);
        first.text( first.text()[0].toUpperCase() + first.text().slice(1) )

        var last = $( '.editable' ).children('span').eq(-1);
        last.text( last.text().replace(/[^.?'"]$/, '$&.') )

    });


  });

});

Answer 3

对于大写字母，您可以使用css text-transform之类的

wrapper:first-child{
    text-transform: capitalize;
}

为了保持句号结尾，我建议在删除函数中添加一个块，并检查最后一个字母是否是!/?/.之一，如果没有为最后一个元素添加句号。像这样：

jQuery('.editable span').bind("mousedown", function() {
       jQuery(this).remove();
         if(jQuery(".editable").children("span:last-child").html().substr(-1) !== "?" && jQuery(".editable").children("span:last-child").html().substr(-1) !== "!" && jQuery(".editable").children("span:last-child").html().substr(-1) !== "."){
        jQuery(".editable").children("span:last-child").html(jQuery(".editable").children("span:last-child").html()+".");
       }
    });
});

经过测试 - https://jsfiddle.net/e1mvekpx/20/

Answer 4

这是一个更新的代码，它找到第一个范围并将其文本大写：

jQuery(document).ready(function() {
        jQuery('.editable span').bind("mousedown", function() {
           jQuery(this).fadeOut(200, function () {
               var firstSpan = jQuery('.editable span:visible').first();
               var text = firstSpan.text();
               firstSpan.text(text[0].toUpperCase() + text.substring(1));				
           });
        
        });
    });

.editable {
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editable">
   <span>Hello</span> <span>world!</span> <span>進撃の巨人</span> <span>What</span> <span>isn't</span> <span>reality?</span> 
</div>

请注意，它并未真正检查是否有任何文本可用，因此如果没有文本，text[0]将导致错误。

div的内容应始终以大写字母开头，并以句号结尾

4 个答案: