Monday, February 17, 2025
HomeCSSUtilizing the Intl.Segmenter | Michael Gearon

Utilizing the Intl.Segmenter | Michael Gearon


I just lately had the necessity for a prototype to interrupt up a piece of textual content into its sentences in order that the person might work together with the person sentences. For instance, they might copy that sentence to their clipboard, view feedback or go away a remark about that sentence.

I’m not that conversant in Javascript, one thing I’m attempting to enhance in 2025, however fortunately I got here throughout from this submit from Stefan Judis about the way to spilt JavaScript strings into sentences, phrases or graphemes with “Intl.Segmenter”.

The code

With the Intl.Segmenter object is hand I then went about coding this. The output I used to be searching for was to interrupt up every sentence in a span tag, with the category of sentence. With the category title sentence I then needed so as to add some CSS to say on hover add a background color to spotlight which sentence is being highlighted.

HTML

On this occasion the HTML is straight ahead, I’m simply placing some Lorem Ipsum textual content inside a paragraph ingredient which has an id of textual content. This id will then be utilized by the JavaScript to seek out the paragraph we need to break into sentences

<div class="field">
  <p id="textual content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel justo vitae mauris lacinia malesuada. Praesent sed quam consequat, varius ex et, tempor nisl. Cras eget aliquet ligula. Sed nec tristique dolor, sed posuere enim. Aenean nec faucibus justo, molestie sodales ex. Suspendisse ullamcorper ullamcorper lorem, eu pulvinar orci sodales eget. Curabitur id enim dolor. Ut ullamcorper, ligula eget hendrerit posuere, nulla odio consequat urna, sit amet finibus tortor tortor eu libero. Duis fringilla quam nunc, a mollis est vulputate quis. Nunc pharetra turpis mauris, ac malesuada ante congue sit amet. Nam at nisl quis mauris aliquet maximus.</p>
</div>

JavaScript

Within the JavaScript I’ve created a perform known as spiltSentence. Then created a const declaration to say use the Intl.Segmenter object, specifying that our textual content is English and we need to break the textual content right into a sentence (this may very well be phrase for instance).

Then I created a brand new const known as ingredient after which mentioned discover within the doc a component with the ID textual content. If the code is ready to discover that then break up that paragraph into sentences and for every sentence wrap in a span ingredient with a category of sentence.

If it will possibly’t discover the ingredient then write a warning to the console with a warning to say no ingredient with ID sentence discovered.

doc.addEventListener("DOMContentLoaded", perform () {
  perform splitSentence() {
    
    const segmenter = new Intl.Segmenter('en', { granularity: 'sentence' });

    // Get the ingredient by ID
    const ingredient = doc.getElementById('textual content');

    if (ingredient) {
      // Use the segmenter to separate the textual content content material of the ingredient into sentences
      const textual content = ingredient.textContent;
      const segments = Array.from(segmenter.section(textual content)).map(section => section.section);

      // Wrap every sentence in a span with a category for styling
      const wrappedSegments = segments.map(sentence => `<span class="sentence">${sentence}</span>`);

      // Change the ingredient's HTML content material with the wrapped sentences joined with <br>
      ingredient.innerHTML = wrappedSegments.be a part of(' ');
    } else {
      console.warn("No ingredient with ID 'sentence' discovered.");
    }
  }

  // Name the perform to course of the ingredient
  splitSentence();
});

CSS

.sentence {
    show: inline;
    margin: 8px 0;
    cursor: pointer;
    box-sizing: border-box;
    margin-right: 7px;
}

.sentence:hover{
    background-color: #ffdd00;
}

Output

And right here is the output on CodePen

See the Pen
Utilizing the Intl.Segmenter
by Michael Gearon (@michaelgearon)
on CodePen.

Michael Gearon

Written by

Michael Gearon

Senior Interplay Designer and Co-Writer to Tiny CSS Initiatives

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments