How to replace the extension but remain the title

Question

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?

Answer 1

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
  

Answer 2

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.

Answer 3

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