CODEWITHSUNDEEP
javascriptstringurlsubstring
Saptaparnee
Saptaparnee

Reputation: 45

Extract url from a long string and append it to another string to make a new url

I am new to JS, I have a long string from which I need to extract the substring src=/sites/default/files/text_images/cover/gita.jpg (inside the img tag as seen in the string). Then I need to construct a new url: http://12.23.34/sites/default/files/text_images/cover/gita.jpg. Please let me know how can I do it.

The following is the long string.

"\n\n<!-- THEME DEBUG -->\n<!-- THEME HOOK: 'image_formatter' -->\n<!-- BEGIN OUTPUT from 'core/themes/stable/templates/field/image-formatter.html.twig' -->\n  \n\n<!-- THEME DEBUG -->\n<!-- THEME HOOK: 'image' -->\n<!-- BEGIN OUTPUT from 'core/themes/stable/templates/field/image.html.twig' -->\n<img src=\"/sites/default/files/text_images/cover/gita.jpg\" alt=\"Bhagavad Gita\" typeof=\"foaf:Image\" />\n\n<!-- END OUTPUT from 'core/themes/stable/templates/field/image.html.twig' -->\n\n\n\n<!-- END OUTPUT from 'core/themes/stable/templates/field/image-formatter.html.twig' -->\n\n",

Upvotes: 0

Views: 60

Answers (2)

mplungjan
mplungjan

Reputation: 177960

Like this:

const str = `"\n\n<!-- THEME DEBUG -->\n<!-- THEME HOOK: 'image_formatter' -->\n<!-- BEGIN OUTPUT from 'core/themes/stable/templates/field/image-formatter.html.twig' -->\n  \n\n<!-- THEME DEBUG -->\n<!-- THEME HOOK: 'image' -->\n<!-- BEGIN OUTPUT from 'core/themes/stable/templates/field/image.html.twig' -->\n
<img src=\"/sites/default/files/text_images/cover/gita.jpg\" alt=\"Bhagavad Gita\" typeof=\"foaf:Image\" />\n\n<!-- END OUTPUT from 'core/themes/stable/templates/field/image.html.twig' -->\n\n\n\n<!-- END OUTPUT from 'core/themes/stable/templates/field/image-formatter.html.twig' -->\n\n",`
const div = document.createElement("div");
div.innerHTML=str;
let url = new URL(div.querySelector("img").src);
url.hostname = "12.23.34";
url.protocol="http:";
console.log(url.href);

Alternative for older browsers or if you need the anchor

const str = `"\n\n<!-- THEME DEBUG -->\n<!-- THEME HOOK: 'image_formatter' -->\n<!-- BEGIN OUTPUT from 'core/themes/stable/templates/field/image-formatter.html.twig' -->\n  \n\n<!-- THEME DEBUG -->\n<!-- THEME HOOK: 'image' -->\n<!-- BEGIN OUTPUT from 'core/themes/stable/templates/field/image.html.twig' -->\n
<img src=\"/sites/default/files/text_images/cover/gita.jpg\" alt=\"Bhagavad Gita\" typeof=\"foaf:Image\" />\n\n<!-- END OUTPUT from 'core/themes/stable/templates/field/image.html.twig' -->\n\n\n\n<!-- END OUTPUT from 'core/themes/stable/templates/field/image-formatter.html.twig' -->\n\n",`
const div = document.createElement("div");
div.innerHTML=str;
const a = document.createElement("a")
const img = div.querySelector("img");
a.href=img.src;
a.hostname = "12.23.34";
a.protocol="http:";
a.textContent = img.alt;
div.innerHTML="";
div.appendChild(a)
document.body.appendChild(div);

Removing the port:

const str = `"\n\n<!-- THEME DEBUG -->\n<!-- THEME HOOK: 'image_formatter' -->\n<!-- BEGIN OUTPUT from 'core/themes/stable/templates/field/image-formatter.html.twig' -->\n  \n\n<!-- THEME DEBUG -->\n<!-- THEME HOOK: 'image' -->\n<!-- BEGIN OUTPUT from 'core/themes/stable/templates/field/image.html.twig' -->\n
<img src=\"http://localhost:12345/sites/default/files/text_images/cover/gita.jpg\" alt=\"Bhagavad Gita\" typeof=\"foaf:Image\" />\n\n<!-- END OUTPUT from 'core/themes/stable/templates/field/image.html.twig' -->\n\n\n\n<!-- END OUTPUT from 'core/themes/stable/templates/field/image-formatter.html.twig' -->\n\n",`
const div = document.createElement("div");
div.innerHTML=str;
const a = document.createElement("a")
const img = div.querySelector("img");
a.href=img.src;
a.hostname = "12.23.34";
a.protocol="http:";
a.port="";
a.textContent = img.alt;
div.innerHTML="";
div.appendChild(a)
document.body.appendChild(div);

If you MUST use regex (NOT recommended), try this

const re = /<img src=\"(.*?)\"/;
const src = `"\n\n<!-- THEME DEBUG -->\n<!-- THEME HOOK: 'image_formatter' -->\n<!-- BEGIN OUTPUT from 'core/themes/stable/templates/field/image-formatter.html.twig' -->\n  \n\n<!-- THEME DEBUG -->\n<!-- THEME HOOK: 'image' -->\n<!-- BEGIN OUTPUT from 'core/themes/stable/templates/field/image.html.twig' -->\n<img src=\"/sites/default/files/text_images/cover/gita.jpg\" alt=\"Bhagavad Gita\" typeof=\"foaf:Image\" />\n\n<!-- END OUTPUT from 'core/themes/stable/templates/field/image.html.twig' -->\n\n\n\n<!-- END OUTPUT from 'core/themes/stable/templates/field/image-formatter.html.twig' -->\n\n"`.match(re)[1]
console.log("http://12.23.34"+src)

Upvotes: 3

MUHAMMAD ILYAS
MUHAMMAD ILYAS

Reputation: 1450

Bad coding with good result

let urlRaw = `\n\n<!-- THEME DEBUG -->\n<!-- THEME HOOK: 'image_formatter' -->\n<!-- BEGIN OUTPUT from 'core/themes/stable/templates/field/image-formatter.html.twig' -->\n  \n\n<!-- THEME DEBUG -->\n<!-- THEME HOOK: 'image' -->\n<!-- BEGIN OUTPUT from 'core/themes/stable/templates/field/image.html.twig' -->\n<img **src=\"/sites/default/files/text_images/cover/gita.jpg\**" alt=\"Bhagavad Gita\" typeof=\"foaf:Image\" />\n\n<!-- END OUTPUT from 'core/themes/stable/templates/field/image.html.twig' -->\n\n\n\n<!-- END OUTPUT from 'core/themes/stable/templates/field/image-formatter.html.twig' -->\n\n`;

console.log(`http://12.23.0.34`+ urlRaw.split("**")[1].replace(`src="`,""));

Upvotes: 0

Related Questions