Emphasize a portion of a text / Apply formatting to a variable

I am facing an issue where I need to format only the date in a specific string. I have managed to extract the date and store it in a variable after isolating it from the original message.

<div class="foo"><p> Click here now and get by January 1st </p></div>

Despite successfully creating the variable for the date, I am struggling to bold this substring. I attempted to apply CSS styling directly to the variable but it did not work as expected:

 var fullMessage =  $('.foo p').text();
 var justTheDate = fullMessage.substring(fullMessage.indexOf('get by') + 7);
 $(justTheDate).css("font-weight","700");

Is there a way to achieve this formatting?

javascriptjquerycssvariablessubstring

Answer №1

Here is a solution that may be useful to you:

var targetElement = $('.foo p'),
    messageContent =  targetElement.text(),
    dateToFormat = messageContent.substring(messageContent.indexOf('get by') + 7),
    formattedDate = '<span style="font-weight: 700">' + dateToFormat + '</span>',
    updatedHtml = messageContent.replace(dateToFormat, formattedDate);

    targetElement.html(updatedHtml)

Check out the demo on Fiddle

Answer №2

Perhaps consider enclosing the date section in a strong tag for clarity?

If the date is generated dynamically, such as through a variable, you might want to use a placeholder like a span tag within your paragraph with a specified class.

Try this: 

<span class="date"></span>

Insert your date information into that designated spot, and then style it using CSS.

span.date{font-weight: 600;}.

Answer №3

To add the date at the end, you can use jQuery or regular JavaScript to create a span element and then append it to the paragraph tag.

var fullMessage = $('.foo p');
var justTheDate = fullMessage.substring(fullMessage.text().indexOf('get by') + 7);
fullMessage.append('<span class="date">' + justTheDate + '</span>');

You can wrap the date in a span and apply a CSS class for styling purposes.

<style>
    .date {
        font-weight: 700;
    }
</style>
<div class="foo"><p> Click here now and get by <span class="date">January 1st</span></p></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discovering duplicates for properties within an array of objects in React.js and assigning a sequential number to that specific field

I am working with an array of objects where each object contains information like this: const myArr=[{name:"john",id:1}{name:"john",id:2}{name:"mary",id:3}] In the first 2 elements, the "name" property has duplicates with the value "john". How can I updat ...

javascriptarraysreactjstypescriptecmascript-6

Angular ngClass and ngIf directives failing to update upon alterations

In my current Angular project, I am working on a functionality where I need to dynamically change a class based on a variable without having to refresh the page. I have experimented with *ngIf/else and [ngClass] directives, which do work, but unfortunatel ...

javascriptangular

nth-child selector causing tbody element to break

I have a code snippet that should alternate row colors between yellow and red. It works perfectly without using the <tbody> tags. However, when I include the <tbody> tags in my code, the layout breaks. It seems to restart with yellow at every n ...

htmlcsscss-selectors

Unable to align only one link on the right as flex-end is not functioning correctly

I need help rearranging my row of items displayed at the top of the page. I want one item to appear on the far right while the rest are aligned to the left. I attempted using align-self: flex-end but it didn't work. Here's the current code snippe ...

htmlcssflexbox

Exploring the world of mouse events in Typescript using JQuery, all the while maintaining strict typing regulations

I'm currently working on a project that involves using JQuery in Typescript. One challenge I'm facing is passing a mouse event from a JQuery element to a wrapper class. Here's an example of what I'm trying to achieve: import * as $ fro ...

jquerytypescripttypes

What is the best way to create a JavaScript "input" field that only accepts vowel letters?

Is there a way to create an "input" field that only accepts vowel letters? Additionally, I want to ensure that copying and dragging text into the input field will also be filtered out. <div class="field"> <input class="fie ...

javascripthtmlinputtext

Is the Angular-fullstack generator production application experiencing issues with serving socket.io correctly?

Having a bit of trouble with two angular-fullstack apps deployed on AWS using the same setup and configuration. It appears that socket.io-client/socket.io.js is not being properly served on one of them, despite both apps having identical settings. There ...

javascriptangularjsnode.jssocket.ioangular-fullstack

JavaFX WebEngine pauses until ajax is finished

Currently, I am working on a JavaFX data mining application that heavily relies on WebView and WebEngine. The entire mining process involves two main steps. Firstly, the user navigates to a specific website using the UI in WebView to configure the search f ...

jqueryajaxjavafxjavafx-webengine

I successfully merged two arrays (decks of cards) without using recursion, but I'm curious to understand where I went wrong with the recursive approach

Currently, I am working on a function that shuffles two arrays together using recursion. The goal is to combine the top and bottom halves of a deck of cards into a single array with elements interleaved. For example: The first element should come from the ...

javascriptarraysrecursionmergeshuffle

Horizontal rule spans the full width of the content, appearing within an ordered list

Check out this example to see the issue with the horizontal rule not extending all the way across under the number. I've tried using list-style-position:inside;, but that interferes with positioning the number correctly due to the left image being flo ...

htmlcss

What is the method for accessing 'this' beyond the scope of my object?

My Jcrop initialization for a website includes my own namespace. I have a question regarding the this keyword. Whenever I need to access my base object called "aps" in any callback function, I have to wrap this in a variable (I chose the word that). Is t ...

javascriptjquerythisfrontend

Using jQuery to retrieve the text content of child elements

Struggling to extract the text of child elements using jQuery. I've been at this for a couple of days and can't seem to make it work. If anyone could spare a moment to review, I would greatly appreciate it! SCRIPT: function generateRemoveSect ...

javascriptjquery

An AJAX request can affect the functionality of an if/else statement

I am currently working on integrating AJAX functionality into my code for a 'like' button. I have both the 'Like' and 'Dislike' buttons displayed on the screen. An AJAX request is made to check my database, and depending on th ...

jqueryajaxhideshowshow-hide

Ways to set a background image for two separate components in Angular

Trying to figure out how to integrate this design: The challenge lies in having a background image that spans across the navbar and the content below it. Currently, the code separates the navbar component from the content component, making it tricky to ac ...

htmlcssangular

Stop jQuery from adding duplicate values to a table

When I make an AJAX call using jQuery and PHP to receive JSON response, I am encountering a problem with duplicate values. The code is functioning correctly, but when selecting an option from the drop-down list, duplicate entries appear. The scenario invol ...

javascriptphpjqueryjsonajax

"Implemented a user-friendly header and footer that stick to the top and

My goal is to create a fixed header and footer, allowing the main content to scroll underneath while keeping the right navigation in place. To achieve this effect, I've been experimenting with different solutions. One of my attempts can be viewed her ...

jquerycss

What is causing my div exchange using .class to fail?

Struggling to convert this code from working with IDs to Classes. The code reveals one Div while hiding another based on the onClick event. Originally, it was straightforward because the div location was absolute. In the classes version, I need to revea ...

javascriptjqueryhtmlcssjquery-selectors

Is there a way I can retrieve my Nodemailer email and store it in a variable?

I am currently utilizing the nodemailer module in conjunction with node.js and have successfully implemented the following: let transporter = nodemailer.createTransport({ service: 'gmail', auth: { user: '<a href="/cdn-cgi/l/email ...

javascriptnode.jsnodemailer

Rotate arrows by 90 degrees instead of 180 degrees in Bootstrap 5 Accordion

I have customized a Bootstrap 5 Accordion according to the guide provided at https://getbootstrap.com/docs/5.0/components/accordion/. The default behavior rotates the arrows 180 degrees when an item is opened, changing from 'v' to '^'. ...

javascriptcssbootstrap-5bootstrap-accordion

What is the best way to include multiple views in a main HTML template in Angular?

Is there a way to load two HTML files into a base HTML file? Essentially, I have a base HTML file with a header and content view, and I want to load different HTML files into each of them. Here is the base HTML file structure: <div class="container"> ...

javascriptjqueryangularjsangularjs-directiveangularjs-ng-repeat