I am looking for a way to automatically link mentions of user accounts on my website, such as @Melon or @Banana, using JavaScript. For example, I want @Banana to be linked to example.com/users/Banana. Additionally, I would like the linking functionality to only apply to instances where the mention is in the form of "@Username" and not when it's part of another word like "@Banana's". Would appreciate any suggestions or clarifications on this matter.
Thank you!
Check out this regex solution tailored to handle various user usernames
const regex = /@([\w\d_-]*)(?:[^\.'<\bbr\b/*>\s])*/g;
const testCases = ["@Apple<br/>'s", "@Orange", "@BAnanas-55464<br>", "@Space_Invader432"];
console.log(testCases.map(str => ({original: str, replace: str.replaceAll(regex, '<a href="example.com/users/$1">$&</a>')})));If you want to extract specific parts of the text, you can use regular expressions:
text.replace(/(^|\s)@([^\s]+)(\s|$)/g, "$1<a href=\"example.com/users/$2\">@$2</a>$3")
In the case of @Banana's, you will need to determine which characters should be included in the link and what marks the end of the @mention.
This particular regex assumes that the link starts with @ and ends with a whitespace character.
The issue I'm facing is with the hiddenColumns option not working as expected. Even when I set it to hiddenColumns:['name'], the name column remains visible. I've updated to the latest version, but the problem persists. UPDATE I am tr ...
I came across a helpful question/answer here: How can I bind arrow keys in JS/jQuery? However, I am facing an issue where although I can use arrow keys to navigate through selections on my site, I am unable to edit text boxes as before because the arrow k ...
Lately, I've been facing some challenges with getting the shadows to work properly when using a displacement map. Despite researching the issue on Google, I still can't seem to figure it out. From what I gather, the displacement map is supposed t ...
My approach involves creating an XML file to store items for my unordered list and accessing it via AJAX call on page load. However, I'm facing an issue where the AJAX result is not getting appended in my div element as expected. Interestingly, when I ...
In a certain file, I have defined an object with the following structure: export const items = { first: false, second: false, third: false } Within a component, I am using this object as shown below: import { items } from 'file'; const [el ...
I'm currently developing a .asp webpage using JavaScript as the scripting language. One of the features I have is a drop-down menu with options populated from an 'agencies' table in the database. The 'agencies' table includes vario ...
I need assistance converting a byte array to an image using Javascript for frontend display. I have saved an image into a MySQL database as a blob, and it was first converted to a byte array before storage. When retrieving all table values using a JSON ar ...
Struggling to access arrays inside a JSON object and save them into separate arrays. Despite trying various methods, I have not been successful in retrieving these arrays. I suspect that my approach to accessing arrays within the JSON object is incorrect, ...
Hey there, I'm wondering if AJAX is necessary for the functionality I want to implement. Here's the scenario: I have a function that generates a calendar and I plan to add 'forward' and 'backward' arrows so users can navigate ...
I'm currently working on a weather app using jQuery. One issue I've come across is with my getJSON function - I want to utilize a variable that I created with the current latitude and longitude coordinates. The openweathermap API key loads the JS ...
<mat-spinner *ngIf="loading === true" class="tableLoading"></mat-spinner> <div *ngIf="loading === false"> ... </div> It's puzzling to me that the spinner takes significantly longer to ...
Throughout the previous summer, I managed a website (not my own) that pulled in posts from its corresponding Facebook page and displayed them on a designated page. I utilized an application token for this process, but now it no longer functions due to the ...
Let's say there is a class called X: class X { constructor(); performAction(): void; } Now, we have another class named Y where we want to include an object of class X as a property: class Y { xProperty: X; } How do we go about defining ...
It is not enough to limit the tags in a WYSIWYG editor by excluding buttons, as I can still copy page content and paste it into the editor, which it will accept! I am looking for a solution to restrict the allowed tags. For example, I admire how Stack Ove ...
Oops! An error occurred: Invalid hook call. Hooks can only be called inside the body of a function component. There are several reasons why this might have happened: You could have incompatible versions of React and the renderer (e.g., React DOM) Your cod ...
Struggling to implement an onclick delete function on dynamically selected elements, but consistently encountering the issue of only selecting the first element each time. // Function for deleting entries $("#timesheet").on('click', &ap ...
In the browser, my custom Angular tree component is displayed like this: + Parent 1 + Child 1-A - Child 1-A-A - Child 1-A-B - Child 1-A-C + Child 1-B + Child 1-C This is what the directive template looks like: <ul> &l ...
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 ...
Currently, I am experimenting with promises to handle asynchronous requests using XHR. Interestingly, I noticed that when I try to log the result within the .then function, it works perfectly fine. However, if I attempt to log it outside of this scope, it ...
Having trouble using angular translate with dynamic translation values that need to be translated first. If you want a better explanation of the issue, check out this plunker: PLUNKER <p translate="PARAGRAPH" translate-values="{username: ('us ...