Develop a JavaScript regex pattern that can detect numbers that begin with a hashtag, while excluding any HTML special characters or pre-existing hyperlinks

Question

Develop a JavaScript regex pattern that can detect numbers that begin with a hashtag, while excluding any HTML special characters or pre-existing hyperlinks

I am attempting to generate links from specific strings. My current approach is:

([^&]#)([0-9]+)(?![^<>]*>)

However, the results are not entirely accurate.

Test 1: &#106
Test 2: #1040
Test 3: some text followed by #1060
Test 4: <a href="#1060">#1060</a>
Test 5: <b>#1078</b> (...or any other tag except <a>)

Test 1 & 4: should NOT match.
Tests 2, 3 & 5: should match.

The goal is to match a #number within any tag except for a link tag (and its attributes).

You can experiment with this in the following jsfiddle: http://jsfiddle.net/xqnjs2uq/3/

Considered as "regex3", the regex pattern plays an integral role alongside two others in achieving the desired outcome.

UPDATE Thanks to @chsdk's assistance, I've found a solution using two separate regex's (refer to regex3 and regex4 in the linked jsfiddle)...

http://jsfiddle.net/xqnjs2uq/6/

/[^&|href="]+(#[0-9]+\b)/gim  --> matches Test 3 and 5 above
/^(#[0-9]+)/   --> needed to match Test 2

The ultimate challenge remains - Can this be condensed into a single regex?

javascript regex

Answer 1

Answer №1

Here is a regex pattern you can use: /[^&|href="](#[0-9]+)/g.

If you want to see it in action, check out this live demonstration, which provides results.

https://i.sstatic.net/do57l.png

It will match with the following:

https://i.sstatic.net/yMq4k.png

Update:

In case you need to exclude matching within links, here is the modified regex:

[^&|"](#[0-9]+\b)(?!<\/a>)

We included \b to ensure it captures the entire expression at a word boundary and (?!<\/a>) to prevent matching inside links.

You can test it again with this updated live demo, or try it out in this code snippet:

var re = /[^&|"](#[0-9]+\b)(?!<\/a>)/g;
var str = 'Test 1: &#106\nTest 2: #1040\nTest 3: some text followed by #1060\nTest 4: <a href="#1060">#1060</a>\nTest 5: <b>#1078</b> (...or any other tag except <a>)';
var m;

while ((m = re.exec(str)) !== null) {
  if (m.index === re.lastIndex) {
    re.lastIndex++;
  }
  document.write("<b>" + m[1] + "</b><br/>");
}

Answer 2

Here is a regex pattern you can use: /[^&|href="](#[0-9]+)/g.

If you want to see it in action, check out this live demonstration, which provides results.

https://i.sstatic.net/do57l.png

It will match with the following:

https://i.sstatic.net/yMq4k.png

Update:

In case you need to exclude matching within links, here is the modified regex:

[^&|"](#[0-9]+\b)(?!<\/a>)

We included \b to ensure it captures the entire expression at a word boundary and (?!<\/a>) to prevent matching inside links.

You can test it again with this updated live demo, or try it out in this code snippet:

var re = /[^&|"](#[0-9]+\b)(?!<\/a>)/g;
var str = 'Test 1: &#106\nTest 2: #1040\nTest 3: some text followed by #1060\nTest 4: <a href="#1060">#1060</a>\nTest 5: <b>#1078</b> (...or any other tag except <a>)';
var m;

while ((m = re.exec(str)) !== null) {
  if (m.index === re.lastIndex) {
    re.lastIndex++;
  }
  document.write("<b>" + m[1] + "</b><br/>");
}

Answer 3

Answer №2

Experiment with this regex pattern:

(^(#|(<[b-zB-Z]+>))((0-9)+)(?!(<\/*a>*)))

Answer 4

Experiment with this regex pattern:

(^(#|(<[b-zB-Z]+>))((0-9)+)(?!(<\/*a>*)))

Answer 5

Answer №3

Check out my solution below! Let me know if this is helpful.

/#[0-9]+/gi

Answer 6

Check out my solution below! Let me know if this is helpful.

/#[0-9]+/gi

Develop a JavaScript regex pattern that can detect numbers that begin with a hashtag, while excluding any HTML special characters or pre-existing hyperlinks

Answer №1

Answer №2

Answer №3

Similar questions

A Guide to Implementing v-for in a JSON Array with Vue.js

Reorganize array elements in a different sequence utilizing JavaScript

Guide to updating the value of a CSS seconds dynamically

What is the best way to display my to-do list items within a React component

Modifying ng-model after file selection in a directive

Caution: The `className` property does not align with Material UI css which may cause issues upon reload

Filtering JSON Objects in JavaScript: A Comprehensive Guide

Transform XML2JS by eliminating square brackets around values

Utilizing npm packages from third-party sources within a custom extension for personal use (not intended for distribution)

Removing a portion of an item with the power of RxJS

Ways to implement route path within Express

A variable that can be changed is available within a closure in Angular services

Issue with v-model not connecting to app.js in Laravel and Vue.js framework

How to Transfer Information Between Two React Components

Cross Domain Requests in Internet Explorer: Preflight not being sent

IE browser issue with includes() method

Pattern match to exclude specific characters in MongoDB

Is there a way to showcase uploaded images as a deck of cards in a react.js application?

Substitute HTML data attributes

Filter through the array of objects using the title key