从一个长字符串中提取url，并将其附加到另一个字符串中，以创建一个新的url。

Question

我是JS的新手，我有一个长字符串，我需要从其中提取出子串。src=/sites/default/files/text_images/cover/gita.jpg 内 img 标签中看到的）。) 然后我需要构造一个新的url。http:/12.23.34sitesdefaultfilestext_imagescovergita.jpg。. 请告诉我怎么才能做到。

以下是长字符串。

"\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",

Answer 1

像这样。

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);

老式浏览器的替代方案 或者你需要的锚

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);

移除端口。

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);

如果您必须使用 regex (不推荐)，请尝试以下方法

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)

Answer 2

糟糕的编码与良好的结果

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="`,""));