Discovering the initial word of a string using jQuery

Question

Discovering the initial word of a string using jQuery

I'm currently facing an issue with jQuery that I need help solving.

Here's the scenario: I am creating tooltips and positioning them directly under a specific trigger using CSS. Everything is functioning correctly, but there is one problem:

In my content, I have a <p> tag containing text. The tooltip is activated by the first word of this text, and due to the alignment, the beginning of the tooltip extends outside of the viewport.

This results in a situation like this:

My goal is to use jQuery to target the first word specifically, allowing me to adjust the tooltip position accordingly. Essentially, I would like to write a function like:

if( isFirstWord == true ) {
    tooltip.css('left','xx%')
}

This way, I can ensure that the tooltip is positioned correctly only when it pertains to the first word of the text.

If my explanation is unclear, please feel free to leave a comment so I can provide more details. Any assistance on this matter would be greatly appreciated.

javascript jquery html css tooltip

Answer 1

Answer №1

Here is one approach:

$('item').each(function(){
     var element = $(this);
     element.html(element.html().replace(/^(\w+)/, '<strong>$1</strong>'));
});

In essence, this code snippet iterates through each occurrence of 'item' and replaces the first word with itself ($1) enclosed in <strong> tags. The \w character class matches letters, digits, and underscores, thereby defining what constitutes a "word" (adjustments may be necessary).

A similar solution can be found at: Changing First Word in Text using jQuery

Answer 2

Here is one approach:

$('item').each(function(){
     var element = $(this);
     element.html(element.html().replace(/^(\w+)/, '<strong>$1</strong>'));
});

In essence, this code snippet iterates through each occurrence of 'item' and replaces the first word with itself ($1) enclosed in <strong> tags. The \w character class matches letters, digits, and underscores, thereby defining what constitutes a "word" (adjustments may be necessary).

A similar solution can be found at: Changing First Word in Text using jQuery

Discovering the initial word of a string using jQuery

Answer №1

Similar questions

Ideas and Recommendations for Building a Laravel and Vue.js Hybrid Structure for MPA/SPA Applications

Problem with the operation of SetInterval/ClearInterval loop

Is there a way to dynamically assign column names during the import process?

Making an Ajax request with JSON is yielding unexpected variables that cannot be modified or removed

Gathering information in the form of a tuple with Selenium in Python

Troubleshooting problems with form submission through the combination of jQuery and Ajax

Guide to sending data from an HTML page to a MVC Controller using WebApi

There was an unexpected error: Unable to access the 'bool' property of an undefined object

The Angular $digest cycle ensures that the entire view is refreshed, rather than just a portion

Selenium WebDriver is struggling to locate an element using link text

Exploring the world of jQuery and Ajax: Experimenting with implementing a POST method through Ajax and retrieving the response in HTML

Ways to clear away adhesive header and maintain its fixed position

Communication between Python and the front-end

Is there a way for me to loop through the URLs stored in an array and showcase them individually in an iframe?

What steps should I take to enable Google Maps style on mobile devices?

Codignator does not attach the array elements together

Activate automatic click or force trigger JavaScript function

Encountering difficulties displaying navigation interface with react native navigation's stack navigator

Adding data to an AngularJS template

Steps to displaying the functions linked to a Jquery element