Adding a CSS style to specific sections of a string that is quoted in a Razor ASP.NET file

Is it possible to format a specific part of a string? I'm trying to only stylize the word within quotation marks.

This is my cshtml code:

        {
            <div class="h-44 overflow-auto text-left mx-4 mb-4">
                <p id="countError" class=" main-text-color mb-2 w-[70%] font-semibold">@Model.ToString().Replace("|", " ")</p>
                <p class="main-text-color">The following errors occurred:</p>



                @foreach (var error in Model.Errors)
                {
                    var errors = error.Split(Environment.NewLine);
                    bool firstLine = true;

                    foreach (var item in errors)
                    {
                        
                        if (firstLine)
                        {
                            <p class="leading-8 text-red-500 font-spec-bold">
                              @Html.Raw(item)
                            </p>
                            firstLine = false;
                        }
                        else
                        {
                            <p id="teste" class=" leading-8 main-text-color ">
                                @Html.Raw(item);
                            </p>
                        }

                    }
                }
            </div>
        }

Here's an example of what I'm looking for:

The original string is like this:

I want to emphasize this "WORD" with bold styling.

I'd like it to look like this:

I want to emphasize this "WORD" with bold styling.

Thank you!

I couldn't find a similar example here, but any guidance would be greatly appreciated.

Answer №1

It is important to enclose the word in {} tags, like this: I want to display {WORD} in italics.

You can then replace { with <i>, and } with </i>:

@Html.Raw(item.Replace("{", "<i>").Replace("}", "</i>"))

output:

https://i.stack.imgur.com/9Lcec.png

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

Ionic version 4 ion-img eagerly preloads images instead of implementing lazy-loading

I recently created a horizontal scroller using FlexLayoutModule. It allows me to display a horizontally scrollable list where each item consists of an image and text column. Here's the relevant snippet from my scroller.component.html: <div class=" ...

Discovering descendant div elements

I've been conducting some research, but I'm struggling to find a specific answer for this. Here is the HTML code snippet: <div class="collapsingHeader"> <div class="listItemWrapper"> <div class="itemWrapper"> ...

Implementing a Fixed Navbar in VueJS on Scroll

I am seeking help with creating a Fixed Navbar on Scrolling using Vue.js. I initially wrote some jQuery code for this functionality, but now I want to transition it to Vue.js. The updated code can be found in a file named navbar.js. Previous jQuery CODE ...

React state update not triggering a component re-render

I've been attempting to toggle the visibility of a div by clicking on another div, but I'm encountering an issue. The div becomes invisible on the first click only if it was visible initially. After that, it remains invisible and does not update. ...

Error: Syntax error detected. Unexpected blank space found. Expecting either "-" symbol, identifier, or variable

Error: Syntax error: unexpected '' (T_ENCAPSED_AND_WHITESPACE), expecting '-' or identifier (T_STRING) or variable (T_VARIABLE) or number (T_NUM_STRING) in C:\xampp\htdocs\Source Code\displaysalesdetailed.php on line ...

Implementing CSS and HTML in Email Communication

I'm noticing a difference between how this appears in a browser versus an email. The text on the image looks perfect when viewed on Mozilla/Chrome, but when I use the same code in an email, the text ends up displaced below the image (right beneath it) ...

Can the `lang` attribute be used in a `style` tag to specify the CSS preprocessor language for VueJS? Are there any disadvantages to using this method?

Occasionally, I notice people incorporating code like this: <style lang="scss"> ... </style> <style lang="stylus"> ... </style> I checked the documentation for the style tag and found that lang is not a valid a ...

The issue of Bootstrap dynamic tabs retaining their active state even after switching tabs, leading to elements being stacked

For my university project, I am developing a website that resembles a text editor using Bootstrap as the framework. To create the website menus, dynamic tabs have been utilized. The following is the code snippet I have implemented: <!--Bootstrap ...

Eliminate any iframes that have a src attribute with the value of "some_src.com/....."

I'm brand new to coding in javascript. I've noticed that there is an annoying ad popup that manages to sneak through Adblock super without being detected. It's driving me crazy and I want to block it! Here's the code for the iframe: IF ...

Techniques for adjusting the dimensions of a select dropdown using CSS

Is there a way to control the height of a select dropdown list without changing the view using the size property? ...

What happens when there is a 1-second delay in loading CSS on an HTML page?

Lately, I've been working on creating HTML and CSS pages. However, whenever I load a page, I notice that there's always a brief half-second flash of the HTML content without any styling applied. Does anyone have an idea why this is happening and ...

Eliminating padding or margin for figures in Bootstrap on smaller screens

I've been struggling to create a fullscreen image on small devices without any margin or padding. Unfortunately, the solutions suggested in this thread didn't work for me. Below is the code I'm currently using (tested on https://jsfiddle.n ...

CSS and JavaScript Nav Menu Collapse (No Bootstrap)

I have written a navbar code using pure HTML/SASS, but I am facing a challenge in adding a collapse element to the navigation bar. Despite trying various solutions from Stack Overflow, I still haven't found one that works for me. Therefore, I am rea ...

Moving object sideways in 100px intervals

I'm struggling to solve this issue. Currently, I have multiple div elements (each containing some content) that I need to drag and drop horizontally. However, I specifically want them to move in increments of 100px (meaning the left position should b ...

Is storing HTML tags in a database considered beneficial or disadvantageous?

At times, I find myself needing to modify specific data or a portion of it that originates from the database. For instance: If there is a description (stored in the DB) like the following: HTML 4 has undergone adjustments, expansions, and enhancements b ...

The horizontal overflow in the HTML code was unsuccessful

I stumbled upon an interesting issue where I applied a div with specific styling: overflow-x: scroll However, the outcome was not as expected. Instead of overflowing, the content simply started on a new line. Here is the source code for reference: & ...

Text centered on hover for figure caption

Check out this fiddle http://jsfiddle.net/sLdhsbou/ where I am trying to center the "x" that appears on hover perfectly no matter what size the image is. Also, why does the transition not occur when moving the mouse outside of the figure, unlike when movi ...

Aligning variable width numbers within a div container

Currently experimenting with CSS to create a calendar design that mimics the look of a traditional paper calendar. One issue I've encountered is the alignment of numbers within boxes, especially when dealing with double digits. When displaying a sing ...

What is the proper way to invoke a function in the code-behind using JavaScript?

I need to invoke a function in the code behind from JavaScript Button : <button class = "btn btn-outline btn-danger dim" type = "button" onclick = "confirmDelete ()"> <i class = "fa fa-trash"> </i> ...

What are some strategies for disregarding the effects of the !important rule

After incorporating some HTML and CSS styling into a third-party site, I encountered an issue where their styling was conflicting with mine, specifically due to certain !important declarations. I want to avoid this conflict without resorting to using !impo ...