Angular JS plugin that locates image links within plain text and transforms them into HTML <img> tags using JavaScript

I am faced with a situation in which I need to show images if the chat messages contain image links, but currently I am only displaying the links as text.

One idea I had was to check for the lastIndexOf('.') and extract the file extension to match it using ng-if, but I don't think this would be a clean solution. Therefore, I am searching for a library or Angular built-in module that can handle this automatically for me, similar to:

linkify (Linkify is a JavaScript plugin that identifies links in plain text and converts them into HTML tags)

javascriptangularjsimagelinkify

Answer №1

convertToImage(text) {
    const regex = /\b(https?:\/\/\S+(?:png|jpe?g|gif)\S*)\b/ig;
    const replaceStr = "<br><img src='$1'>";
    return text.replace(regex, replaceStr);
}

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

Looking for some help with tweaking this script - it's so close to working perfectly! The images are supposed to show up while

Hey everyone, I'm struggling with a script issue! I currently have a gallery of images where the opacity is set to 0 in my CSS. I want these images to become visible when scrolling down (on view). In this script, I have specified that they should app ...

javascriptjquerycss

Tips for generating nested elements in JSON and Java, alongside accessing the subitem values in JavaScript

By implementing this code, I was able to create the following structure int n=3; String json []= new String [n]; try { JSONArray js = new JSONArray(); ArrayList<String> ciudades; ciudades = ...

javajavascriptjsonjsp

After encountering a character with CSS, begin a new line

I have a CSV spreadsheet with data that looks like this: <p>Features:• first feature• second feature• third feature• fourth feature• and so on (the total number of features is variable)</p> I want each feature to display on a new li ...

javascripthtmlcss

Can you transform your content like Google does?

Looking to create a help page with a layout similar to http://support.google.com/plus/?hl=en. Can anyone provide advice or an example of how to update the new content list without refreshing the page? When you click on something like "circles and streams" ...

javascript

An unexpected issue occurred: Unable to invoke method on NPObject

I am new to JSON and having trouble accessing object data. Here is the code snippet: <!doctype html> <html> <head> <meta charset="utf-8"> <title>ajax </title> </head> <body> <p id="p"></p& ...

javascripthtmljson

The npm package for google-spreadsheet.js is experiencing issues and is not functioning correctly when trying to replicate the GitHub

After attempting to implement the basic example code provided at https://github.com/theoephraim/node-google-spreadsheet, I encountered an issue. For instance: const { GoogleSpreadsheet } = require('google-spreadsheet') const creds = require(&apo ...

javascriptnpmgoogle-sheets-api

Google Chart Fails to Display

I am encountering an issue while attempting to integrate a Google chart into my project. The page fails to load, rendering a blank screen. Initially, the page displays correctly for a brief moment after loading and then suddenly turns blank, becoming unres ...

javascriptjqueryajaxchartsgoogle-visualization

The webpage is displaying an error stating that "<function> is not defined."

I recently duplicated a functional web page into a new file on my site. However, after adding a new function and removing some HTML code, the JavaScript function no longer runs when clicking one of the two buttons. Instead, I receive the error message "Beg ...

javascripthtmlfunction

What is the best location to include my JavaScript code in WordPress?

Alright, so I've got this world map on one of my WordPress pages and here's an example of the code: <area onmousedown="modifyImage('world_map_01', './images/map/asia.jpg')" onmouseout="modifyImage('world_map_01', ...

javascripthtmlwordpress

Retrieve particular data points from the object based on its unique identifier

Hey there, I'm facing an issue with Angular where I need to retrieve a specific object from an array based on its ID. I'm quite lost on how to approach solving this problem. var Obj = [ { Id: "1", shape: "circle", color: "red" }, { Id: " ...

javascriptarraysjsonangularjssearch

Toggle Visibility of Elements with Javascript and Html

I've been working on implementing a "Show All / Hide All" feature. Currently, clicking on the text opens the image and text individually. However, I am looking to add a functionality for expanding all divs at once. To see how it currently functions, ...

javascriptjqueryhtmlhideshow

Retrieve the window.selection() range of a content-editable paragraph, taking into consideration any spans within the paragraph's length

When I click on the plain paragraph text, everything seems to work fine. I can determine the start and end of the selected range without any issues. However, when there is a span element with some styling inside the paragraph text, the end of the range is ...

javascripthtmlvue.js

The color of the last clicked DIV is supposed to stay permanent, but for some unknown reason

I'm attempting to replicate this design in my project: http://jsfiddle.net/AYRh6/26/ However, I am facing issues with it and cannot pinpoint the exact problem in the code. I am using code for a toggle effect. Any assistance would be greatly appreciat ...

javascriptjqueryhtmlcss

Displaying an alert when the text box contains a duplicate value

I have a set of input fields with various values that can be edited but must not be left empty (if left empty, display an alert). When I update a field with a new value, if that new value matches any of the other input field values, I want to display an al ...

javascriptjqueryhtmlvalidationinput

`18n implementation in Node.js and front-end JavaScript for localization`

I am currently utilizing express js 4.0 and have set up the i18n module from https://github.com/mashpie/i18n-node in combination with ejs views. My goal is to extend this i18n functionality to .js files as well. Is there a way to enable the i18n function ...

javascriptnode.jsexpressinternationalization

Error encountered with the $get method of AngularJS Provider during configuration() function

Recently, I configured a Provider that fetches a language JSON file from a web server and delivers it to Angular within the config() method. Here is the provider setup: .provider('language', function () { var languageWsURL , languageC ...

javascriptangularjshttp

JQuery post request not providing the expected response after posting

I have a post request var prodId = getParameterByName('param'); var pass = $('#password1').val(); $.post("rest/forget/confirm", { "param" : prodId, "password" : pass }, function(data) { ...

javascriptjqueryajaxpost

Invoking res.download() in the Express framework

It's puzzling why this issue is occurring, and it's quite frustrating. I was expecting the file to be downloaded in line with the guidelines provided in the Express documentation. Below is the code snippet I am using: //within React (App.js) ...

javascriptreactjsexpress

Babelify is having trouble transpiling JSX code within the node_modules directory

I have successfully set up Babelify to transpile jsx code to js, and I've created node_modules before, allowing me to link them without a specific file path, just the package name. However, when I add jsx code within my node_module code, babelify flag ...

javascriptreactjsnpmnode-modulesjsx

Generate the URL based on the JSON feed

Can someone help me figure out what I'm doing wrong here? I'm attempting to create the image URL using the flickr.photos.search method now (I need to show images close to the visitor's geolocation), it was working with groups_pool.gne befor ...

javascriptjqueryjsongetjsonflickr