How to replace the extension but remain the title

Navigation
0

I have a folder, which contains several videos with different names and different formats:

link

link

link

link

And so on ...

How do I give two download options to 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 you can see, all links in the HTML document are *.webm .

     

What's missing is to switch from *.webm to *.mp4 , to the <a id='mp4'>MP4</a> link.


I thought about working with RegExp , something I still can not work out.

Does anyone have a logic to show me how I can work around this problem?

    
asked by anonymous 07.04.2017 / 20:27

3 answers

3

There is a problem using . replace () like this: 

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

What happens if location has ".webm" in the middle of the string 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 use a regular expression to avoid this: 

/\.webm$/i
  • \.webm - House to literal string ".webm" .
  • $ - Token that corresponds to the end of the string.
  • /i - i ignore uppercase / lowercase.

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
08.04.2017 / 13:36
1

A solid response follows 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 - method replace .

These are the variables: ext and vid .

And starting with the Mariano argument, regular expression . I made the inclusion to avoid errors.

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

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

For more details, compare before and after :

Before 

function baixar(arquivo) {

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

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

Then 

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 does not require comments.

    
07.04.2017 / 22:36
0

I believe in this part, if I understood correctly what you want to do.

You can use the replace method of strings in javascript. 

href = href.replace('.webm','.mp4');
    
07.04.2017 / 21:30
Click detection and value collection How to set the largest prime number within a given number?