How to replace the extension but remain the title

Asked

Viewed 149 times

0

I have a folder, in which covers several videos with equal names and different formats:

https://sites.google.com/site/mplayerplugin/repositorio/monstros_sa_2.webm

https://sites.google.com/site/mplayerplugin/repositorio/monstros_sa_2.mp4

https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.webm

https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.mp4

And so on and so forth ...


As I will give two download options, for visitors. I have to change one of them. See:

function baixar(arquivo) {

    var get = document.getElementById("download").getElementsByTagName('a');

		for(var i in get) {
		     get[i].href = arquivo; 
		}
}
<a href="https://sites.google.com/site/mplayerplugin/repositorio/monstros_sa_2.webm" onclick="baixar(this); return false">A</a>
<a href="https://sites.google.com/site/mplayerplugin/repositorio/madagascar_2.webm" onclick="baixar(this); return false">B</a>
<a href="https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.webm" onclick="baixar(this); return false">C</a>
<a href="https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory.webm" onclick="baixar(this); return false">D</a>

    <hr>

    <span id="download">
        <a id='mp4'>MP4</a> &nbsp; | &nbsp; <a id='webm'>WEBM</a>
    </span>

As we can see, all links in the HTML document are in nature *.webm.

What remains is to exchange *.webm for *.mp4, to the link <a id='mp4'>MP4</a>.


I thought I’d work with RegExp, something I still can’t work out.

Someone has a logic to show me how to get around this obstacle?

  • seuLink.replace('.webm', '.mp4');

  • @andrepaulo Huuummm! truth didn’t even remind me of this function at the time you brought me to memory. I’m gonna test it out and I’m gonna go back to check if it worked properly for the purpose. =)

  • I did not understand when Voce will use Mp4 and when it will use WEBM... at that time Voce converts the name ... assuming that Voce has two links.. a para WEBM e uma pra MP4... no de mp4 Voce tem que rodar um metodo que pega o link e troca para . mp4 .. since the same is coming with the . webm

3 answers

3


There’s a problem in using .replace() thus:

str.replace(".webm", ".mp4");

What happens if location has ".webm" in the middle of the chain instead of as an extension?

var str = "www.webmail.meusite.com/foo.webm",
    ext = str.replace(".webm", ".mp4");

console.log(ext); // -> "www.mp4ail.meusite.com/foo.webm"    (-Caramba!)



You have to wear a regular expression to prevent this:

/\.webm$/i
  • \.webm - House to literal chain ".webm".
  • $ - Dollar sign which corresponds to the end of the chain.
  • /i - iblock letters/lower case.

Code

function alternarExt(value) {
    var links = document.getElementsByTagName("a"),
        regex, ext, a;

    if (value == 0) {
        regex = /\.mp4$/i;
        ext = ".webm";
    } else if (value == 1) {
        regex = /\.webm$/i;
        ext = ".mp4";
    }
        
    // Substituir os links
    for (var i = 0; i < links.length; i++) {
        a = links[i];
        a.href = a.href.replace(regex, ext);
        a.textContent = a.href;
        //console.log(a.href);
    }
}
<form>
  <input type="radio" name="ext" value="0" id="opt-webm" onchange="alternarExt(value);" checked="checked">
  <label for="opt-webm">.mp4 -> .webm</label>
  <input type="radio" name="ext" value="1" id="opt-mp4" onchange="alternarExt(value);">
  <label for="opt-mp4">.webm -> .mp4</label>
</form>

<ul>
  <li><a href="https://sites.google.com/site/mplayerplugin/repositorio/monstros_sa_2.webm">https://sites.google.com/site/mplayerplugin/repositorio/monstros_sa_2.webm</a></li>
  <li><a href="https://sites.google.com/site/mplayerplugin/repositorio/madagascar_2.webm">https://sites.google.com/site/mplayerplugin/repositorio/madagascar_2.webm</a></li>
  <li><a href="https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.webm">https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.webm</a></li>
  <li><a href="https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory.html">https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory.html</a></li>
  <li><a href="https://www.webmail.com/foo.webm">https://www.webmail.com/foo.webm</a></li>
</ul>



  • Alternatively you can use the following regular expression to match any extension:

    /\.[a-z0-9]{1,5}$/i
    
  • Nice that it was useful

  • @Diego can do it with the information contained in this answer. What is relevant is effectively replacing the link.

  • 1

    Okay, I understand your posture in your way of seeing and interpreting. But it wasn’t really a list with all the formats being alternated from webm for mp4 and vice versa. What I was looking for was exactly how I gave the answer. In this case I am using my solution. However, your reply drew my attention to the detail of the character string have the set "webm" and/or "mp4" in its formation. Thus resulting in a possible error, but make use of the regular expression to treat(s) strings.

1

It follows a solid response by the method replace, which is more practical for the purpose. See:

function baixar(arquivo) {
    var get = document.getElementById("download").getElementsByTagName('a');

    var ext = document.getElementById("mp4");

  	    for(var i in get) {
	        var vid = get[i];
	        vid.href = arquivo;
	        ext.href = vid.href.replace(/\.webm$/g, '.mp4');
  	    }
}
<a href="https://sites.google.com/site/mplayerplugin/repositorio/monstros_sa_2.webm" onclick="baixar(this); return false">A</a>
<a href="https://sites.google.com/site/mplayerplugin/repositorio/madagascar_2.webm" onclick="baixar(this); return false">B</a>
<a href="https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.webm" onclick="baixar(this); return false">C</a>
<a href="https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory.webm" onclick="baixar(this); return false">D</a>

<hr>

    <span id="download">
        <a id='mp4'>MP4</a> &nbsp; | &nbsp; <a id='webm'>WEBM</a>
    </span>

Explanation

I had to create other variables to apply what andrepaulo suggested - the method replace .

It’s them, the variables: ext and vid.

And starting from the argument of Mariano, about regular expression. I made the inclusion to avoid mistakes.

We apply the method replace to update object properties RegExp global.

replace(/\.webm$/g, '.mp4');

For more details, compare the before and the afterward:

Before

function baixar(arquivo) {

    var get = document.getElementById("download").getElementsByTagName('a');

    for(var i in get) {
         get[i].href = arquivo; 
    }
}

Afterward

function baixar(arquivo) {
    var get = document.getElementById("download").getElementsByTagName('a');

    var ext = document.getElementById("mp4");

    for(var i in get) {
            var vid = get[i];
            vid.href = arquivo;
            ext.href = vid.href.replace(/\.webm$/g, '.mp4');
    }
}

The code is relatively clean and requires no comment.

  • Interface hint: use it radio button instead of link to let the user know if he is downloading in mp4 or webm

0

I believe this is the part, if I understand what you want to do.

you can use the method replace of strings in javascript.

href = href.replace('.webm','.mp4');

Browser other questions tagged

You are not signed in. Login or sign up in order to post.