0

Hola necesito extraer de un atributo el src o basicamente la url para ello cree una expresion regular que es la siguiente:

  /"https:([\w\W]+?)"/

Todo para extraer de = el src o la url: data-map= '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63538.988843284!2d-73.39126060847818!3d5.539292971765542!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e6a7c2e897fba5b%3A0xac9fda7e6b9aa68c!2sTunja%2C%20Boyac%C3%A1%2C%20Colombia!5e0!3m2!1ses!2sve!4v1602162121073!5m2!1ses!2sve" width="100" height="100" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>'

Lo que necesito es extraer ese url del src pero no lo he podido lograr si uso replace solo eliminaria el url y no se como hacer lo contrario.

Cualquier manera de hacerlo estaría agradecido

4 respuestas 4

1

Otra respuesta más elegante

tenemos tu iframe en forma de string:

const map = '< iframe src="url" >< /iframe>'

Si estás en el browser, es trivial usar el documento, insertar tu string para convertirlo en un tag, y de él obtener el src limpiamente.

El truco es crear un elemento a partir de una cadena de html, lo cual no se puede hacer con document.createElement, así que creamos un elemento auxiliar y luego definimos su innerHTML. Al pedir su firstChild tenemos un iframe nativo, y de éste su atributo src.

const div= document.createElement('div')
div.innerHTML=map
const iframe=div.firstChild
console.log(iframe.src)

De hecho se puede hacer en una sola línea:

const map = '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63538.988843284!2d-73.39126060847818!3d5.539292971765542!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e6a7c2e897fba5b%3A0xac9fda7e6b9aa68c!2sTunja%2C%20Boyac%C3%A1%2C%20Colombia!5e0!3m2!1ses!2sve!4v1602162121073!5m2!1ses!2sve" width="100" height="100" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>';

const src = (p => !(p.innerHTML=map )||p)(document.createElement('p')) .firstChild.src ;

console.log(src);

Usando jQuery se podría crear el elemento sin el truco anterior:

const map = '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63538.988843284!2d-73.39126060847818!3d5.539292971765542!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e6a7c2e897fba5b%3A0xac9fda7e6b9aa68c!2sTunja%2C%20Boyac%C3%A1%2C%20Colombia!5e0!3m2!1ses!2sve!4v1602162121073!5m2!1ses!2sve" width="100" height="100" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>';

const src = $(map).attr('src')

console.log(src);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Si no estás en el browser, en realidad cualquier lenguaje de servidor es capaz de parsear HTML en tanto exista un paquete para leer XML, pero en general todos tienen también alguna librería para modelar un DOM.

0

(edit: dado que al parecer quieres la url completa incluyendo el protocolo, se editó el grupo de captura para incluirlo)

Suponiendo que tu string fuera

<iframe src="https://www.google.com/etc?parametro1=valor1&parametro2=valor2"></iframe>

La captura debiera hacerse sobre lo que viene después de https:// hasta la siguiente ocurrencia de una comilla doble.

Los slashes de https:// deben escaparse dado que tienen significado semántico en una expresión regular. Por lo tanto sería:

let datamap = `<iframe src="https://www.google.com/etc?parametro1=valor1&parametro2=valor2"></iframe>`,
  capture_groups = /src="(https:\/\/[^"]+)"/.exec(datamap);

console.log(capture_groups[1]);

Y eso daría un arreglo cuyo segundo elemento es www.google.....

En tu caso el string no está rodeado por comillas dobles sino por &quot, por lo que no basta el operador cualquier cosa menos ". Se haría en cambio con un grupo de captura non-greedy, como por ejemplo

let datamap = `<iframe src=&quot;https://www.google.com/etc?parametro1=valor1&parametro2=valor2&quot;></iframe>`,
  capture_groups = /src=&quot;(https:\/\/.+?)&quot;/.exec(datamap);

console.log(capture_groups[1]); 

El grupo non-greedy (.+?) se satisface con la mínima cadena posible, de modo que no se "adueña" del &quot; final

Por otro lado también sería seguro reemplazar esos &quot; de antemano:

let capture_groups = /src="(https:\/\/[^"]+)"/.exec(datamap.replace(/&quot;/g,'"'))

Aunque se podría (como te respondieron antes) explotar la cadena, esa solución depende de que el orden de los atributos del iframe se mantenga.

0

Lo que me causa ruido es por qué tienes tantos &quot; yo lo que haría es hacerle un split() a tu cadena por ese caracter ejemplo:

const iframe = `<iframe src=&quot;https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63538.988843284!2d-73.39126060847818!3d5.539292971765542!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e6a7c2e897fba5b%3A0xac9fda7e6b9aa68c!2sTunja%2C%20Boyac%C3%A1%2C%20Colombia!5e0!3m2!1ses!2sve!4v1602162121073!5m2!1ses!2sve&quot; width=&quot;100&quot; height=&quot;100&quot; frameborder=&quot;0&quot; style=&quot;border:0;&quot; allowfullscreen=&quot;&quot; aria-hidden=&quot;false&quot; tabindex=&quot;0&quot;></iframe>`;

const cadena1 = iframe.split('&quot;');

2.- Si tú muestras por consola la posición 1 de ese arreglo tendrías la URL esperada, ejemplo:

console.log(cadena1[1]);
1
  • Los de los &quot es de google maps, básicamente lo unico que quiero es la url sacarla de todos esos datos Commented el 1 nov. 2020 a las 2:26
0

Si alguno necesita una solución esta fue la que encontre

var str = '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63538.988843284!2d-73.39126060847818!3d5.539292971765542!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e6a7c2e897fba5b%3A0xac9fda7e6b9aa68c!2sTunja%2C%20Boyac%C3%A1%2C%20Colombia!5e0!3m2!1ses!2sve!4v1602162121073!5m2!1ses!2sve" width="100" height="100" frameborder="0" 

var str = '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63538.988843284!2d-73.39126060847818!3d5.539292971765542!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e6a7c2e897fba5b%3A0xac9fda7e6b9aa68c!2sTunja%2C%20Boyac%C3%A1%2C%20Colombia!5e0!3m2!1ses!2sve!4v1602162121073!5m2!1ses!2sve" width="100" height="100" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>'; 
  var expresion_regular= /"(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/gi;
  var resultado = str.match(expresion_regular);
  console.log(resultado[0].replace(/['"]+/g, ""));

1
  • Si bien has encontrado la respuesta, en lo personal, veo más optima la expresión regular expuesta en la respuesta de @ffflabs Commented el 1 nov. 2020 a las 3:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.