My goal is to enhance the appearance of words that begin with an "@" symbol by making them bold. For example, transforming the sentence:
'@xyzharris has a cat @zynPeter'
into:
'@xyzHarris has a cat @zynPeter'
My goal is to enhance the appearance of words that begin with an "@" symbol by making them bold. For example, transforming the sentence:
'@xyzharris has a cat @zynPeter'
into:
'@xyzHarris has a cat @zynPeter'
$("p:contains(@)").html(function(i, h){
return h.replace(/(@\w+)/g, '<b>$1</b>');
});
b{color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>@xyzharris has a cat @zynPeter</p>
<p>This is @roko answer to @user21.</p>
<p>@cats like @dogs. A lot.</p>
Ensure that you only have plain strings within your p
selectors. If not,
$('p, p *').contents().filter(function() {
return this.nodeType === 3;
}).text(function(i, t) {
$(this).replaceWith(t.replace(/(@\w+)/g, '<b>$1</b>'));
});
b{color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a href="#">@xyzharris has a</a> cat @zynPeter</p>
<p>This is <span>@roko answer</span> to @user21.</p>
<p>@cats <i>like @dogs</i>. <span>A lot</span>.</p>
In the regex pattern above, I utilize \w
, which represents
\w
Matches any letter, number or underscore.
that appears interesting for a @us3rn4_me. To match any character except a whitespace, consider using:
\S
Matches anything other than a space, tab or newline.
The +
Quantifier ensures repetition of the preceding \w
expression
+
one to unlimited times, as many times as possible, giving back as needed [greedy]
I've been exploring JavaScript regular expressions and encountering some challenges while trying to build a larger one. Therefore, I have decided to seek help for the entire problem rather than just individual questions. What I am looking for is a re ...
I'm trying to make these circuits look like they are running downwards. I have the right movement, but I can't seem to start them at their actual size, causing them to appear skewed at the beginning of the animation and then scaling to full size ...
I am working on a project using nextjs and typescript, with tailwind for styling. In my tailwind.config.js file, I have defined some colors and a keyframe object. My issue is how to access these colors to use as background values in the keyframe. Here is ...
Are there any tools available that automatically inject or include NPM dependencies into the index.html file, similar to the GRUNT-BOWER plugin for BOWER dependencies? The project in question is a VUE-CLI WEBPACK project. Can this functionality be achieve ...
Scenario: In my chat application, I have the chat displayed in the middle of the screen with a sticky textfield at the bottom. My goal is to ensure that when users scroll through the chat messages, the textfield remains at the bottom but appears on top of ...
I'm really struggling to figure out the best approach for setting up my package.json file. I have a JavaScript module that contains multiple reusable JS files, let's call it Module1. In Module1's package.json, the name attribute is set to " ...
let formData = new FormData(); payloadData = JSON.stringify(payload.unitDoctors); for (var prop in payloadData) { formData.append(prop, payloadData[prop]); } axios({ method: "put", url: apiUrl + payload.id, data: formData }) .then(resp ...
I am looking for a way to show/hide a div up and down, but I have some requirements: I cannot use jQuery: toggle(), slideToggle(), fade, animate, etc. all use display: none, and I need the div to still occupy space in the DOM (I will be processing things ...
I am facing an issue with hiding a div (class="login-form") and displaying it only after clicking the Login button on my HTML page using jQuery. However, despite clicking the button, the login form does not appear. Can anyone help me understand why this ha ...
I am currently utilizing a NodeJS REST API that connects to a MySQL database. Within this database, there is a specific table we will refer to as Table_01: | C_0| C_1| C_2| C_3| | 1 | A1 | B1 | 1 | | 2 | A1 | B2 | 0 | | 3 | B1 | A1 | 0 | | 4 | A2 | ...
I'm new to JavaScript and currently working on a task involving queues. Here is the task description: Create a function called nextInLine that takes an array (arr) and a number (item) as parameters. The function should add the number to the end of ...
Is there a way to have a logo linked to the homepage and also have an h1 element that is invisible? This is my current layout: <header id="pageHeader"> <h1> <a href="<?php bloginfo('url'); ?>"> & ...
Whenever the checkbox is clicked and the resolved data in a promise is false, I want the checkbox to remain unchecked. If the data is true, then the checkbox should be checked. I have set up a codesandbox for this purpose. This example utilizes react and ...
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 ...
Imagine a site with three modules: "links", "home", and "chat". The "links" and "home" modules are static pages that do not require long polling. However, in the "chat" module, new messages may arrive at any time from other users, requiring an immediate up ...
Currently working on the Wikipedia Viewer project for freeCodeCamp. I'm encountering an issue with the ajax function as nothing is being logged in the console upon click. The code snippet in question is provided below. Appreciate any help or insight o ...
I need assistance with calculating the number of days, hours, and minutes between a start date time and an end time. For example: Start Date Time = "09-06-2017 10:30" End Date Time = "10-06-2017 11:45" I am looking for the result to be 1 day, 1 ...
I'm having trouble getting my HTML/CSS tabs to look like the ones in the image. I've experimented with border-radius but haven't been able to achieve the desired result. Can anyone provide guidance on how to replicate these tabs using only ...
Currently, I am utilizing a service from a services module within the main scaffolded app controller in NestJS. Although it is functioning as expected - with helloWorldsService.message displaying the appropriate greeting in the @Get method - I can't ...
Currently, I am implementing Draftjs with draft-js-plugins-editor and utilizing two plugins: draft-js-mathjax-plugin and draft-js-mention-plugin My goal is to replace all mentions with their corresponding values when the user uses '@' to mention ...