Using Regex to locate image links in PNG, GIF, and JPG format within the HTML code of CKeditor

I am currently using a regex pattern to detect posted image links in CKeditor. However, I am facing an issue with identifying certain types of image links like: 

<a href="#">myimage.png</a>

My goal is to create a regex pattern that can identify png<... (along with following characters). Initially, I attempted to use a dot for this purpose, but it does not seem to be the correct approach:

/(https?:\/\/\S+\.(?:jpg|png|gif|jpg<.|png<.|gif<.))\s+/

I understand that this might be a basic question, but unfortunately, I haven't been able to find the right solution yet. Thank you for your assistance!

javascriptregex

Answer №1

It's important to understand the limitations of blacklisting when it comes to security measures. No matter how thorough your list is, there will always be a loophole that attackers can exploit.

Instead of relying solely on blacklisting, one approach could be to use a regex pattern to specifically target common image file extensions like .jpg, .png, and .gif. By adding a condition to search for these extensions followed by a non-word character, you can create a more robust filter system.

/\.(jpg|png|gif)\b/

This regex pattern should effectively match most known cases of image file extensions, providing a stronger defense mechanism compared to a generic blacklist.

Answer №2

Check out this regular expression pattern:

<img[^>]+src=(["'])?([^'"]*)\1[^>]*>

Here is a sample snippet of code using the regex pattern:

let htmlString = '<img src="image.jpg">';
let match = htmlString.match(/<img[^>]+src=(["'])?([^'"]*)\1[^>]*>/);
if (match !== null) {
    // Found a match: match[0]
    let imageUrl = match[2];
} else {
    // No match found
}

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

The powerful combination of Ajax and Django creates a dynamic Like button

Encountering difficulties while trying to implement a basic like button feature. Despite following various tutorials, clicking on the Like button does not yield any action. See below: models.py class Comentario (models.Model): titulo = models.CharFie ...

javascriptjquerypythonajaxdjango

The issue of numbers not being properly summed in Node.js

I'm currently working on storing product prices in sessions. The issue arises when a product is clicked twice - instead of adding the two prices together, they concatenate into a single value. For example, 15 + 15 results in 01515. I'm unsure why ...

javascriptnode.jsexpress

Triggering special characters in jQuery autocomplete

I am facing a specific issue: I need to create a customized autocomplete feature using jQuery that is triggered by the "@" character. The problem arises when I start typing in the textbox with "@", it works fine. However, if I enter "@" after typing some ...

javascriptjqueryautocompletejquery-ui-autocomplete

Utilize jQuery to retrieve the classes of list elements

I have been using $('#ul li').get() to retrieve all the list elements and store them in an array. Each of these list elements contains specific classes... var i; var listClass = ('#ul li').get(); for(i=0;i<listClass.length;i++){ ...

javascriptjqueryarrays

jQuery encountering error when uploading multiple files upon loading

I'm having trouble with this jQuery plugin ( ). Whenever I try to set the events on it, I keep getting an error message saying "Function expected". Can someone provide assistance? Everything seems to be working fine except for binding to the events. ...

javascriptjqueryasp.netjquery-plugins

Preflight error: Requests blocked due to cross-origin restrictions

Hey, I'm really struggling with understanding cross origin requests. Here's the code snippet that's causing me trouble: Here is my JavaScript code: var config = { headers: { 'Access-Control-Allow-Origin&a ...

javascriptphp

Enhancing react-input-range with unique Custom Arrow heads

I'm currently working with react-input-range to create a price range slider. While I've managed to customize the CSS of the range slider, I now need to figure out how to add arrow heads inside the circles as shown below: https://i.sstatic.net/pm ...

javascriptcssreactjsless

Need to ensure that an AJAX form doesn't resubmit without the need for a page

Encountering a peculiar mystery issue here... I have created a button on a webpage that triggers a form submission. The form is enclosed within a DIV, which dynamically updates to display the modified data. (this is embedded in a smarty template) form: ...

javascriptphpjqueryhtmlajax

Inquiries regarding the vuex dynamic registration module result in a complete refresh of all Vue components

When trying to create a new Vue component, I encounter the issue of having to call store.registerModule() before creation. However, this action results in all existing Vue components being destroyed and recreated. The same issue happens when using store. ...

javascriptvue.jsvuex

Transforming an array of Instagram photos into an array specifically consisting of chosen photos

Trying to configure my Instagram API website to allow users to pick photos. I have managed to store the data in a database and display the photos, but I'm struggling to enable photo selection in a different array. Below is the code snippet: <?ph ...

javascriptphpjqueryarraysinstagram

Customizing the output format of Ng Date Picker beyond the standard ISO-8601

Just to clarify, I'm talking about a specific DatePicker component that can be found at the following link: Although the DatePicker interface is user-friendly and visually appealing, I'm facing an issue with the way it outputs values. While ther ...

javascriptangulartypescript

How can I automatically close the side menu when clicking on one of its list items?

I found inspiration for my project from this example http://tympanus.net/codrops/2014/09/16/off-canvas-menu-effects/. Specifically, I've been using the Elastic example. Everything is working well, and the menu closes when clicking outside of the menu ...

javascriptjqueryhtmlcssjquery-easing

Tips for confirming the successful loading of the reCAPTCHA JS file prior to form submission

My issue involves a recaptcha and a registration form. Let me share with you a simplified version of a handler: //my_script.js document.getElementById("my_form").onsubmit = function(e) { e.preventDefault(); grecaptcha.execute(); var grecap_resp = g ...

javascripthtmlrecaptcha

Is TypeScript's nullish coalescing operator (??) supported by more browsers compared to JavaScript's equivalent?

When it comes to the nullish coalescing operator (??) in JavaScript, browser support is limited to newer browsers such as Chrome 80, Edge 80, and Firefox 72. Since TypeScript gets converted to JavaScript, do nullish coalescing operators also undergo some ...

javascripttypescriptbrowser-support

Transform the colors of rich text content to match dark mode, similar to the feature in MS

Seeking a solution to convert rich text content colors into dark mode without relying on the filter:invert(1) CSS option. Microsoft Outlook manages this conversion effectively, unlike the current method that turns magenta color into green in dark mode. Ou ...

javascripthtmlcssoutlookcolors

JSDoc encounters issues when processing *.js files that are produced from *.ts files

I am currently working on creating documentation for a straightforward typescript class: export class Address { /** * @param street { string } - excluding building number * @param city { string } - abbreviations like "LA" are acceptable ...

javascripttypescriptjsdoc

What is the best way to preserve the state of child components after being filtered by the parent component?

I've been working on a small application using create react app to enhance my skills in React, but I've hit a roadblock with managing the state. The application maps through JSON data in the parent component and displays 6 "image cards" as child ...

javascriptreactjsreact-hookscreate-react-appreact-state-management

How is it possible for the javascript condition to be executed even when it is false?

Despite the condition being false, the javascript flow enters the if condition. Check out the code snippet below: <script> $(document).ready(function() { var checkCon = "teststr2"; console.log("checkCon: "+checkCon); if(checkCon == " ...

javascriptjqueryajax

How can HTML and CSS be linked to display images independently?

Check out this code: body{ background-image:url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg'); } div.header{ background-color:#F0F8FF; text-align:center; padding:3px; ...

javascriptjqueryhtmlcss

difficulty in detecting cordova deviceready

When developing my iOS app using JavaScript, I included cordova.js in my index.html file. The deviceready function is called correctly upon first login, but when I logout and then login again, the device ready event does not trigger. document.addEventLi ...

javascriptiosfacebookcordova