imagifyjs?

[skywalk1411]

The same lib but for <img> ?

[nfrasser]

Hi @skywalk1411, you can do this with a custom render function . Example with linkify-string:

"Hello http://example.com/image.jpg".linkify({
  render: ({ tagName, attributes, content }) => {
    if (/\.(gif|jpe?g|png|svg)$/i.test(content)) {
      // URL ends with image extension
      return `<img src="${attributes.href}" />`
    } else {
      const attributeStr = "";
      for (const attr in attributes) {
        attributeStr += ` ${attr}=${attributes[attr]}`;
      }
      return `<${tagName}${attributeStr}>${content}</${tagName}>`;
    }
  },
});

[skywalk1411]

hello

Hi @skywalk1411, you can do this with a custom render function . Example with linkify-string:

"Hello http://example.com/image.jpg".linkify({
  render: ({ tagName, attributes, content }) => {
    if (/\.(gif|jpe?g|png|svg)$/i.test(content)) {
      // URL ends with image extension
      return `<img src="${attributes.href}" />`
    } else {
      const attributeStr = "";
      for (const attr in attributes) {
        attributeStr += ` ${attr}=${attributes[attr]}`;
      }
      return `<${tagName}${attributeStr}>${content}</${tagName}>`;
    }
  },
});

sorry to disturb you but what is the syntax with linkifyElement? why would I add "string". in front the linkifyElement function?

const options = {
    defaultProtocol: 'https',
    target: '_blank',
    render: ({ tagName, attributes, content }) => {
      if (/^(http(s)?:\/\/)?((w){3}.)?youtu(be|.be)?(\.com)?\/.+/gm.test(content)) {
        return `<div class="ratio ratio-16x9"><iframe src="${attributes.href}" title="YouTube video" allowfullscreen></iframe></div>`;
      } else {
        let attributeStr = "";
        for (const attr in attributes) {
          attributeStr += ` ${attr}=${attributes[attr]}`;
        }
        return `<${tagName}${attributeStr}>${content}</${tagName}>`;
      }
    }
  };
  let test2 = document.querySelector(`div.container-fluid:nth-child(4)`);
  for (let i = 1; i <= test2.children.length - 1; i++) {
    let target = test2.children[i].children[1];
    //linkifyElement(target, options);
    linkifyElement(target, options);
  }```

[nfrasser]

@skywalk1411 please see the reference implementation here:

linkifyjs/packages/linkify-element/src/linkify-element.js

Lines 97 to 116 in 8951997

	/**
	* @param {Document} doc The document implementaiton
	*/
	function getDefaultRender(doc) {
	return ({ tagName, attributes, content, eventListeners }) => {
	const link = doc.createElement(tagName);
	for (const attr in attributes) {
	link.setAttribute(attr, attributes[attr]);
	}
	if (eventListeners && link.addEventListener) {
	for (const event in eventListeners) {
	link.addEventListener(event, eventListeners[event]);
	}
	}
	link.appendChild(doc.createTextNode(content));
	return link;
	};
	}