Der Inhalt von div sollte immer mit Großbuchstaben beginnen und mit einem Punkt enden

Question

Ich möchte dem Benutzer erlauben, Wörter in einem div-Tag zu entfernen, ich mache dies einfach, indem Sie alle Wörter in <span> Tags und zielen Sie das Tag, siehe genial jsFiddle.

So ist der Satz innerhalb des div ist:

Hallo Welt!巨人 撃 の 巨人 Was ist nicht Realität?

Meine Frage ist, wie kann ich den Satz immer beginnen mit einem Großbuchstaben und enden mit einem Punkt machen, es sei denn wenn der Satz mit einem dieser Zeichen endet: .?!'")

So Wenn der Benutzer ein paar Worte entfernt und der Satz ist:

Welt!進 撃 の 巨人 Was ist nicht

Dann habe ich es zu transformieren wollen:

Welt!巨人 撃 の 巨人 Was ist nicht.

Answer 1

Versuchen Sie, diese fiddle aktualisiert

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

Für den Großbuchstaben Sie css text-transform wie

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

Damit wird der Punkt am Ende verwenden würde ich vorschlagen, um einen Block zu Ihrer entfernen Funktion hinzufügen und überprüfen, ob der letzte Buchstabe eines von !/?/., falls nicht, fügen Sie dem letzten Element einen Punkt hinzu. Wie so:

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()+"."); 
     } 
    }); 
}); 

geprüft - https://jsfiddle.net/e1mvekpx/20/

Answer 3

Hier ist eine viel kürzere Lösung:

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

Hier ist eine aktualisierte Code, der die erste findet umspannen und seinen Text groß schreiben:

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>

Sie zu beachten, dass es nicht wirklich überprüft, ob es ein Text zur Verfügung oder nicht so text[0] ist zu einem Fehler führen wird, wenn kein Text vorhanden ist.