Javascript Bookmarklet to Convert String to valid File Name

To save file as a string, but the string contains invalid characters for file name. This is a simple Bookmarklet to convert the string to valid file name.

 
document.title = "Convert To Valid Filename";
document.body.innerHTML = '<h3>Create Input Box</h3><input style="width:100%;" type="text" id="myName" placeholder="Enter Name"><button id="btn">Save</button><span style="display:none;" id="msg">converted!</span>';
const btn= document.getElementById("btn");
const myName= document.getElementById("myName");
const msg= document.getElementById("msg");
 
function onClipboard(){
  var clip = navigator.clipboard.readText();
  clip.then((clipText) => {
    var filename = clipText.replace(/\"/gi,"'").replace(/[\\\/"\*\:\?<>|]/gi, '');
    document.getElementById("myName").value = filename;
    navigator.clipboard.writeText(filename).then(() => {
            msg.style.display = "block";
            setTimeout(function() {
                    msg.style.display = "none";
                },1000);
            });
        }, () => {});
}
 
myName.addEventListener('click', onClipboard);
btn.addEventListener('click', onClipboard);
 

To make it a Bookmarklet, the code has to be encoded.

 
javascript:(function()%7Bdocument.title %3D "Convert To Valid Filename"%3Bdocument.body.innerHTML %3D '<h3>Create Input Box<%2Fh3><input style%3D"width%3A100%25%3B" type%3D"text" id%3D"myName" placeholder%3D"Enter Name"><button id%3D"btn">Save<%2Fbutton><span style%3D"display%3Anone%3B" id%3D"msg">converted!<%2Fspan>'%3Bconst btn%3D document.getElementById("btn")%3Bconst myName%3D document.getElementById("myName")%3Bconst msg%3D document.getElementById("msg")%3Bfunction onClipboard()%7Bvar clip %3D navigator.clipboard.readText()%3Bclip.then((clipText) %3D> %7Bvar filename %3D clipText.replace(%2F%5C"%2Fgi%2C"'").replace(%2F%5B%5C%5C%5C%2F"%5C*%5C%3A%5C%3F<>%7C%5D%2Fgi%2C '')%3Bdocument.getElementById("myName").value %3D filename%3Bnavigator.clipboard.writeText(filename).then(() %3D> %7Bmsg.style.display %3D "block"%3BsetTimeout(function() %7Bmsg.style.display %3D "none"%3B%7D%2C1000)%3B%7D)%3B%7D%2C () %3D> %7B%7D)%3B%7DmyName.addEventListener('click'%2C onClipboard)%3Bbtn.addEventListener('click'%2C onClipboard)%7D)()

Now you can create a new bookmark and paste the string above as URL of the bookmark. Whenever you click the bookmark, it will turn the current web page to a simple UI in which you can paste the string and the converted string will be copied to clipboard.