I must modify the initial statement to appear in bold from the paragraph with the use of JavaScript and CSS

Mr. XYZ and Mrs. ABC are known for their integrity. They own a stylish car.

In the next paragraph, I would like to emphasize the first sentence by making it bold,

We admire our exceptional leader J.K.L. He shows great potential.

In this section, I want to highlight the sentence by putting it in bold,

We look up to our visionary leader J.K.L.

To further emphasize the point, I will make the entire sentence bold.

Answer №1

var x = $('.last_wfp').text();
var y = x.slice(0, x.indexOf('. '));
var z = x.slice(x.indexOf('. '), x.length);

$('.last_wfp').html('<span class="last_bold">' + y + '</span>' + z);

var p = $('.last_wfp1').text();
var q = p.slice(0, p.indexOf('. '));
var r = p.slice(p.indexOf('. '), p.length);


$('.last_wfp1').html('<span class="last_bold">' + q + '</span>' + r);


var m = $('.last_wfp2').text();
var n = m.slice(0, m.indexOf('. '));
var o = m.slice(m.indexOf('. '), m.length);


$('.last_wfp2').html('<span class="last_bold">' + n + '</span>' + o);
.last_bold{
    font-weight:bold;
    padding-top:2em;
    display:inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="last_wfp">This is the first sentence that should be bold. This is the second sentence that doesn't need any styling. This text will not change! And then there is more. Another sentence follows...</p>
<p class="last_wfp1">This is the second sentence that I want in bold . This is the second sentence that shouldn't have any styling. This text remains as it is! Followed by more content.  Yet another sentence...</p>
<p class="last_wfp2">This is the third sentence that deserves to be bold.</p>

Answer №2

    p::first-line {
      font-weight:bold;
    }
<p>Mr. MMM and Mrs. sss they are truthful. They have their own car.<p>
<p>We are fortunate to have a great leader named F.Rah. He is a very talented individual.</p>
<p>There is no doubt that we have a wonderful leader in F.Rah</p>

This should work like a charm!

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

Add a checkbox element to a web API using ReactJS

I'm currently learning react and encountering an issue with checkboxes that I can't seem to resolve. I am working on a modal for updating and inserting data in a .net core web api, which is functioning correctly. However, within the app, I'm ...

Safari AJAX glitch - Unable to load requested resource

Today, an unexpected bug has appeared in a web app I'm currently developing. Without making any changes to the code, this bug suddenly emerged: I am sending AJAX requests (using vanilla JavaScript instead of jQuery) to our local server running MAMP P ...

Issues with installing dependencies for Node.js AWS Lambda functions

I recently developed a lambda function using SAM, but after pushing all the code to the lambda function, I realized it's not installing necessary dependencies like mysql when triggered. Isn't it supposed to automatically npm install all required ...

Using Three.js to create a blurred SVG texture from a canvas

I am attempting to apply an SVG as a texture over a model with UV mapping, but it appears very blurry. I'm using the texture from a 2D canvas, which looks fine on its own, but once applied to the model, it doesn't look good at all. Any suggestion ...

PageCallbacks in .NET 1.1

Is it possible to utilize PageMethods in .NET 1.1 for making server-side method calls from the client side? Could you provide a brief explanation on how to use this feature by calling PageMethods.MyMethod(); ? ...

Making Angular table cells interactive with clicks

My table consists of multiple rows, and I want to change the color of a cell to red when clicked. However, only one cell should be red at a time. Whenever I click on a new cell, the previously red cell should return to its original color. How can I achieve ...

Forwarding WebSocket Data from Nginx to Socket.io (without encryption)

Since nginx added support for websocket connections as of yesterday, I have been attempting to make my nginx-nodejs-socket.io application work without the need for HAProxy, but so far I haven't had much success. My goal is to have nginx only send web ...

Ways to eliminate the pale blue space

How can I remove the light blue gap between the "new customer account application" and Name/Street/City sections to make them adjacent? Any suggestions for improving my code as a beginner are appreciated. Thank you. I need to add more text because there ...

Utilizing v-data-iterator in Vuetify to display data fetched from an API in a table

After a long day of searching and experimenting, I've finally arrived here. Initially, I attempted to create a simple table with 2 columns using Row and iterate over the object to populate the left column with its keys. However, I hit a roadblock when ...

The element 'Listitem' is unrecognized and cannot be found in the current context

I am currently working on an ASPX project in Visual Studio and have encountered an issue with a Drop Down field. It appears that the List Items are being ignored in my code. Can anyone advise me on what might be missing? <form runat="server"> &l ...

Discovering a value that aligns with one of the values in an array using Javascript

Just a heads up: this quiz is super simple and only has one input field for each question. This block of Javascript code is used to check if the answer entered in the input field is correct or not. In this case, it checks if the answer entered is 'en ...

Attaching Visual Studio to a C++ Node module: A Step-by-Step Guide

After developing a node.js module in C++ through Visual Studio, I successfully created the project using the node-gyp configure --debug. The compilation process went smoothly and I was able to generate a loadable binary in the Debug folder. By then requiri ...

Exploring AngularJS: Retrieving data based on a specific ID from a JSON document

Within my controller class, I extract the ID of a specific user from the URL and pass it on to the OrderService. My goal now is to fetch the data associated with this ID from a JSON file. How can I accomplish this task? OrderCtrl 'use strict'; ...

The values obtained from the previous parameter object of the React setState hook can vary and are not always

In my code, I am using a useEffect hook to update the state with setState. However, I'm encountering some unusual and inconsistent behavior with the previous parameter: useEffect(() => { setCurrentPicturesObject((existing) => { ...

Using a static function within a library's state function in NextJS is throwing an error: "not a function"

Inside a library, there's a special class known as MyClass. This class contains a static method named setData. The contents of the MyClass.js file are shown below: class MyClass { static DATA = ''; static setData(data) { MyClass ...

Struggling to activate the upload dialog feature

Currently in the process of developing a straightforward website, and I've come across this issue: <form action="upload.php" method="post"> <input type="file" name="image" accept="image/*"> <input type="submit"> </form> Altho ...

What steps are involved in importing remark-gfm into next.config.js?

I am interested in incorporating MDX into next.js with the remark-gfm plugin. After discovering the Next.js Docs on MDX, I decided to follow their guidelines and added an import statement. // next.config.js import remarkGfm from 'remark-gfm;' co ...

Hybrid application: Manipulate HTTP user agent header using AngularJS

I am currently developing a hybrid app using Cordova and Ionic. My current challenge involves making an HTTP request to access a server where I need to modify the user agent of the device in order to pass a secret key. $http({ method: 'GET&a ...

Tips for concealing overflow x on a responsive website

Could use some help here. Whenever I switch to responsive mode, the overflow x feature gets enabled and I'm at a loss on how to disable it. I've attempted using @media to disable overflow but unfortunately it's not working as expected. ...

Highlighting Navbar Items

Can anyone provide advice on how to highlight a navbar item when clicked? I'm unsure if I should use Angular or CSS for this. Any guidance would be greatly appreciated. <div class="collapse navbar-collapse" id="navbarNav"> <ul class ...