Modify string variable value befor further processing-CodePudding

I'm kinda tearing my hair out trying to modify the "UC" into a "UU" stored in my "url" variable.

I need to only replace the very first UC in the string, any subsequent match must be ignored

This is my code (The commented line is what does not work sofar :( )

document.getElementById('btn').onclick = function() {
  var val = document.getElementById('yturl').value;
  var url = "https://www.youtube.com/embed/videoseries?list="   val;

  //var url = Str.replace('UC','UU');

  var a = document.createElement('a');
  var linkText = document.createTextNode(url);
  a.appendChild(linkText);
  a.title = "yturl";
  a.target = '_blank';
  a.href = url;
  a.style.display = 'block';
  document.body.appendChild(a);
}

<form>
  <input type="text" id="yturl" value="UCn-K7GIs62ENvdQe6ZZk9-w" />
  <input type="button" id="btn" value="ChannelPlayListURL" />
</form>

If replacing this string is to cumbersome, "slicing" the first two charas and adding a "UU" would also work for me (but slicing didn't work either sadly)

CodePudding user response：

Using String.prototype.replace() with plain string arguments will only replace the first occurrence.

You should also encode any query parameters correctly for use in a URL

const baseUrl = "https://www.youtube.com/embed/videoseries";

document.getElementById("btn").addEventListener("click", (e) => {
  e.preventDefault(); // usually a good idea, especially around forms

  // Creates a map of query parameters and encodes them when stringified
  const query = new URLSearchParams({
    list: document.getElementById("yturl").value.replace("UC", "UU"),
  });

  const url = `${baseUrl}?${query}`;

  const a = document.createElement("a");
  a.title = "yturl";
  a.target = "_blank";
  a.href = url;
  a.append(url);
  a.style.display = "block";
  document.body.appendChild(a);
});

<form>
  <input type="text" id="yturl" value="UCn-K7GIs62ENvdQe6ZZk9-w" />
  <input type="button" id="btn" value="ChannelPlayListURL" />
</form>

CodePudding user response：

Instead of //var url = Str.replace('UC','UU'); use url = url.replace('UC', 'UU')

or better yet:

var url = "https://www.youtube.com/embed/videoseries?list=" val.replace('UC', 'UU');

CodePudding user response：

You need to do the replacement before using val when assigning url.

document.getElementById('btn').onclick = function() {
  var val = document.getElementById('yturl').value;
  val = val.replace('UC', 'UU');
  var url = "https://www.youtube.com/embed/videoseries?list="   val;

  var a = document.createElement('a');
  var linkText = document.createTextNode(url);
  a.appendChild(linkText);
  a.title = "yturl";
  a.target = '_blank';
  a.href = url;
  a.style.display = 'block';
  document.body.appendChild(a);
}

<form>
  <input type="text" id="yturl" value="UCn-K7GIs62ENvdQe6ZZk9-w" />
  <input type="button" id="btn" value="ChannelPlayListURL" />
</form>