divの内容は常に大文字で始まり、完全な終了で終了する

Question

divタグの単語を削除できるようにするには、すべての単語を<span>タグにラップしてタグをターゲットにするだけですjsFiddle。

だから、divの内側の文は次のとおりです。

こんにちは、世界！進撃の巨人現実ではないのは何ですか？だから、.?!'")

：

私の質問は、私は大文字で文常にスタートを作り、ピリオドで終了することができますどのように、文はこれらの文字のいずれかで終わる場合ない限りですユーザーが少数の単語を削除して文章が：

world！

世界：進撃の巨人、私はそれが変換したいその後

何ではありません！進撃の巨人何ではない。あなたは私はあなたのremove関数にブロックを追加することを提案し、最後の文字のいずれかであるかどうかを確認でしょう末尾にピリオドを保つために

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

のようなCSS text-transformを使用することができ、大文字の場合

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('.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 3

試してみてくださいここでは、はるかに短いソリューションです：

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 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)); \t \t \t \t 
 
      }); 
 
     
 
     }); 
 
    });

.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]はエラーになります利用可能かどうか、任意のテキストがある場合、それは本当にチェックされていないことに注意してください。