Products Technologies Demo Docs Blog Support Company

Converting the Selected Text to "Sentence Case" using JavaScript and Regular Expressions

Sentence case is a mixed case style that uses both uppercase and lowercase letters in sentences, headlines, and titles. This JavaScript function converts selected text into sentence case using regular expressions.

Converting the Selected Text to "Sentence Case" using JavaScript and Regular Expressions

Sentence case is a mixed case style that uses both uppercase and lowercase letters in sentences, headlines, and titles. For example:

This is a headline. New sentences start with a capital letter.

Allowing users to convert selected text to this style improves your application's user experience. The following sample uses regular expressions to find the indexes of a sentence pattern. Typically, a new sentence begins after a period followed by one or two spaces. While some users believe either way is correct, Microsoft formally settled this debate in 2020, siding with those who believe one space is correct, not two. Microsoft Word considers two spaces between sentences to be an error.

Either way, we use the following regular expression to match both situations:

/\.\ +/g

Sentence case

The following code uses the Selection object to get the start offset index and the text of the current selection. The regular expression returns the matches that mark the end and the beginning of a sentence. For each match, the character at the following location index is replaced with its uppercase representation using the setText method.

function setSentenceCase() {

        // get the start offset and the selected text
        TXTextControl.selection.getStart(function(start) {
                TXTextControl.selection.getText(function(curText) {
                
                        // in Text Control, CRLF is one character
                        text = curText.split("\r\n").join("\n");
                
                        // get all matches including indexes
                        var matchesAll = [...text.matchAll(/\.\ +/g)];
                        
                        // to get the actual length, another match is required in JS
                        var matches = [...text.match(/\.\ +/g)];
                
                        const indexes = matchesAll.map(match => match.index);
                        
                        // loop through array of indexes
                        for (let index = 0; index < indexes.length; ++index) {
                                const element = indexes[index];
                                
                                var sel = TXTextControl.selection;
                                
                                var bounds = { "start": matches[index].length + start + element, "length": 1 };
                                sel.setBounds(bounds);
                                sel.setText(text.charAt(matches[index].length + element).toUpperCase());
                        }
                        
                })

        })
}

Happy coding!

Stay in the loop!

Subscribe to the newsletter to receive the latest updates.

ASP.NET

Integrate document processing into your applications to create documents such as PDFs and MS Word documents, including client-side document editing, viewing, and electronic signatures.

ASP.NET Core
Angular
Blazor
JavaScript
React
  • Angular
  • Blazor
  • React
  • JavaScript
  • ASP.NET MVC, ASP.NET Core, and WebForms

Learn more Trial token Download trial

Related Posts

AngularASP.NETBlazor

Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor…

This article shows how to create a backend for the Document Editor and Viewer using ASP.NET Core. The backend can be hosted on Windows and Linux and can be used in Blazor, Angular, JavaScript, and…


AngularASP.NETASP.NET Core

Impressions from .NET Developer Conference DDC 2024

This week we sponsored the .NET Developer Conference DDC 2024 in Cologne, Germany. It was a great event with many interesting talks and workshops. Here are some impressions of the conference.


AngularASP.NETASP.NET Core

Back from Florida: Impressions from VSLive! Orlando 2024

We had an incredible time showcasing our digital document processing SDKs at VSLive! Orlando 2024 as a silver sponsor! Throughout the event, we interacted with hundreds of developers, shared…


AngularASP.NETASP.NET Core

Creating Advanced Tables in PDF and DOCX Documents with C#

This article shows how to create advanced tables in PDF and DOCX documents using the TX Text Control .NET for ASP.NET Server component. This article shows how to create tables from scratch,…


AngularASP.NETASP.NET Core

Back in the Pocono Mountains: Meet Text Control at TechBash 2024

We are back in the Pocono Mountains and are sponsoring TechBash 2024. Located in the beautiful Kalahari Resort, TechBash is a great conference for developers. We are sponsoring the event and will…