If I had a string like this
var feedback = "Yum! #yummy #delicious at #CZ"
Is there an efficient way to extract all the hashtags from the string variable?
I attempted using JavaScript's split() method, but it seems cumbersome as I have to repeatedly split each new string generated from the initial one. Are there any simpler alternatives for accomplishing this task?
To locate instances of a hashtag followed by any non-space characters, you can employ a simple regular expression.
"Exploring #nature and #wildlife in the #jungle".match(/#\w+/g)
// Result: ["#nature", "#wildlife", "#jungle"]
To find alphabetic characters in a string, use the following regex code. Feel free to customize it for other characters:
const result = myString.match(/#[a-z]+/gi);
Are you interested in Unicode or hashtags in languages other than English?
"Mmmm #yummy #donut at #CZ #中文 #.dou #。#？#♥️ #にほ".match(/#[\p{L}]+/ugi)
=> (5) ["#yummy", "#donut", "#CZ", "#中文", "#にほ"]
This concept is further explained in the following answer:
\p{L}matches unicode characters
uthe PCRE_UTF8 modifier, this modifier turns on additional functionality of PCRE that is incompatible with Perl.
For those who value easy reading:
Extract hashtags from your text using: yourText.split(' ').filter(v=> v.startsWith('#'))
This code will output: ["#awesome", "#coffee", "#NYC"]
Here is a simple regular expression that allows emojis and numbers in hashtags without any white space:
"Mmmm #yummy #donut at #CZ#efrefg #:) #cool😎#r234#FEGERGR#fegergr".match(/#[^\s#]*/gmi);
// => ["#yummy", "#donut", "#CZ", "#efrefg", "#:)", "#cool😎", "#r234", "#FEGERGR", "#fegergr"]
One downside is that this regex may include punctuation at the end of hashtags:
"Mmmm #yummy.#donut#cool😎#r234#FEGERGR;#fegergr".match(/#[^\s#]*/gmi);
// => ["#yummy.", "#donut", "#cool😎", "#r234", "#FEGERGR;", "#fegergr"]
However, you can customize the regex to exclude certain characters, such as punctuation marks:
"Mmmm #yummy.#donut#cool😎#r234#FEGERGR;#fegergr".match(/#[^\s#\.\;]*/gmi);
// => ["#yummy", "#donut", "#cool😎", "#r234", "#FEGERGR", "#fegergr"]
If you're looking to include characters from any alphabet in hashtags, consider using this method:
let text = "улетные #выходные // #holiday in the countryside";
const hashtags = []
if (text.length) {
let preHashtags = text.split('#')
let i = 0;
if (text[0] !== '#') i++
for (null; i < preHashtags.length; i++) {
let item = preHashtags[i]
hashtags.push(item.split(' ')[0])
// String.prototype.split() is necessary to filter out non-hashtag related strings
}
}
console.log(hashtags) // outputs [ 'выходные', 'holiday' ]
We use if (text[0] !== '#') i++ to check if the first letter in the "text" string is not a '#'. If it's not, we skip iterating through the first element in the preHashtags Array. Otherwise, if our text string starts with a hashtag, we need to process it.
Remember to validate the resulting hashtags array. The use of null in the for loop is purely for readability purposes; you could also use
for (;i < preHashtags.length; i++)This method ensures that all symbols, including those from non-Latin alphabets, are included, making it beginner-friendly and easy to understand. In terms of performance, it excels in Chrome (and similar browsers like node.js), but performs slightly less efficiently in Firefox and Safari, as shown in this test: .
Consider your platform - whether running code in node.js or a browser, especially if targeting MobileSafari users, when deciding on this approach.
Parse the content and filter out any tags that start with a hashtag.
In the html form, there are input fields for adding a new user to the database. Once a user is added, an email is sent to them using the sendmail() function in the adduser.js file. The email is sent successfully according to my standards. However, I want t ...
I am working with an application that includes a div containing a canvas element to display an image. Additionally, there is a sidebar that can be hidden with the click of a button, causing all other elements to resize and adjust to the remaining space. W ...
On my practice website, I have set up a demonstration for showcasing text data. The issue arises when the user inserts an excessive amount of characters in the text box. To address this, I would like the text to be scrollable so that all content can be d ...
While developing a web application in react.js, I encountered errors that I couldn't solve despite trying various solutions found online. The console displays the following error: Error in Console: Uncaught Error: Cannot find module 'path' ...
I recently started working on a basic Express app (with Node) and I am in the initial setup phase. However, I have encountered an error that is proving to be quite challenging to resolve. Despite my attempts to search for solutions online and browse throu ...
I possess a hefty 10MB JSON file with a structured layout comprising 10k entries: { entry_1: { description: "...", offset: "...", value: "...", fields: { field_1: { offset: "...", description: "...", ...
I am attempting to dynamically update data from a Vue component using jQuery in a Webpack project. Below is the code snippet: <template> <div id="container"> <slot>show string!!</slot> <div id="s_container"&g ...
The other day, while working on a project, I encountered an issue with my GraphQL implementation using the JavaScript graphql-request library. Here is the snippet of code that caused the error: import { request, gql } from 'graphql-request' const ...
Currently, I am utilizing SSR within Next.js. My goal is to create a unique ID within a component in order to use it as an attribute for a DOM element's id. Since this component might be utilized multiple times on a single page, the ID needs to be dis ...
I am facing an issue in logging the error message to the console while everything else seems to be working fine. Specifically, I am unable to log only the message such as "email exists" when the email already exists in the system. const submitHandler = a ...
Imagine this scenario: I run `npm install`, then switch the node version, and run `npm install` again. Will the installed packages in `package-lock.json` and `node_modules` change? (This is considering that the packages were not updated on the npm regist ...
I am currently building a webapp using Typescript and webpack. I have been able to successfully import some modules by including them in my webpack.config.js file as shown below. However, no matter how many times I attempt it, I cannot seem to import the b ...
After pulling my project from another computer where it worked fine, I encountered an error when trying to npm install on this machine. Can someone please provide some guidance on how to resolve this issue and prevent similar problems in the future? npm ER ...
In the process of creating a Django web application, I am exploring methods to determine if a particular application is installed on the user's local machine. One idea I have considered is checking for the existence of a specific folder, such as C:&bs ...
Currently, I am working on developing a registration page using HTML and JavaScript. Although I have added the 'required' tag in HTML to prevent users from submitting empty input fields, I noticed that users can bypass this restriction by simply ...
I have successfully retrieved a JSON response, which is displayed using the code below: Within my HTML document, I have the following structure: <ol id="selectable"></ol> In my JavaScript code, I make use of the following: <script type=" ...
Encountering a problem with parsing fetched JSON data from browsers other than Chrome, Firefox providing error message: "SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data". Notably, code functions in local node.js environmen ...
I am encountering some difficulties with the preselection of a select-input in angularJS. The select-box is being populated by an array. <select class="form-control" ng-model="userCtrl.selected_country" ng-options="country.name for country in userCt ...
There seems to be a lot of repetition in the code that needs to be cleaned up. I'm wondering if the switch statement is necessary. It looks like it requires the muiTheme palette to be passed this way. Also, can these theme constants be placed in a sep ...
I am running a crisp chat service on my website and I am attempting to interact with the chat box from one of my component's typescript files. The chat box is represented as a div element with the id crisp-client inside the body tag. Can someone plea ...