六个有用的 JavaScript 代码片段-51CTO.COM

关于代码素材，我想每个开发者都有属于自己的代码素材库，我今天这篇文章分享的是我的代码素材库内容，虽然不一定适合所有人，但是我还是想将它分享出来，只希望对一些人有用即可。

1.文件内容上传

var selectContent=document.getElementById("selectContent");
var contentForSelection=document.getElementById("contentForSelection");selectContent.onchange=function(e) {
  if (!window.FileReader) {
   alert("Your browser does not support HTML5 'FileReader' function required to open a file.");
  } else {
   let fileis = this.files[0];
   let fileredr = new FileReader();
   fileredr.onload = function (fle) {
    let filecont = fle.target.result;
    contentForSelection.value=filecont;
   };
   //fileredr.readAsArrayBuffer(fileis);
   fileredr.readAsText(fileis);
  }
};1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

在上面的示例中，由于我选择导入的文件是文本格式，因此使用方法 readAsText 而不是 readAsArrayBuffer。

改为使用 readAsArrayBuffer 的实例包括读取图像流或读取 ZIP 存档文件。

成功导入后，文件内容将自动呈现到元素 ID 为“contentForSelection”的文本区域中。

2.保存文件内容

var saveBtn=document.getElementById("saveBtn");
var cnotallow=document.getElementById("contentForSelection");
saveBtn.notallow=function() {
 let txtCnotallow=contentForSelection.value;
 if (!window.Blob) {
  alert("Your browser does not support HTML5 'Blob' function required to save a file.");
 } else {
  let textblob = new Blob([txtContent], {
   type: "text/plain"
  });
  let dwnlnk = document.createElement("a");
  dwnlnk.download = "output.txt";
  dwnlnk.innerHTML = "Download File";
  if (window.webkitURL != null) {
    dwnlnk.href = window.webkitURL.createObjectURL(textblob);
  }
  dwnlnk.click();
  }
};1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

上面的代码片段通常在在线笔记应用程序中实现，以便用户导出他们的输出。或者，在诸如数据/代码格式化程序之类的 Web 实用程序中，通常也会提供 [Save] 功能，以允许用户将后续格式化的文本内容保存到本地存储文件中。

3.复制到剪贴板

复制到剪贴板是基于浏览器的设置中的另一个经典功能。

通常情况下，如果转换后的输出仅用于一次性任务，则不需要将输出保存到文件中，使用以下 JS 代码片段会更合适：

var copyBtn=document.getElementById("copyBtn");
var cnotallow=document.getElementById("contentForSelection");
copyBtn.notallow=function(evt) {
 copyBtn.nextElementSibling.innerHTML="";
 copyTransformedOutput("contentForSelection");
 let smallEle=evt.currentTarget.nextElementSibling;
 smallEle.innerHTML="<span style='color:green'> Copied to Clipboard!</span>";
};
function copyTransformedOutput(inputEleId) {
 let copyText = document.getElementById(inputEleId);
 copyText.select();
 copyText.setSelectionRange(0, 99999); /* For mobile devices */
 navigator.clipboard.writeText(copyText.value);
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

请注意，我选择在成功复制代码片段后显示一条消息“已复制到剪贴板”。

因此，转换后的输出随后可以粘贴到别处，而无需存储到本地文件中以供使用。

4.全部查找和替换

虽然在最新的 JavaScript 控制台中此功能目前是内置的，但由于其实现的独创性和简单性，了解以下 JavaScript 函数仍然是相关且有用的：

function replaceAll(inputStr,toReplace,replaceWith) {
  return inputStr.split(to
                        Replace).join(replaceWith);
}1.
2.
3.
4.

例如，如果我想在文本区域中用“ID”替换“id”：

代码片段的其余部分是这样的：

var replaceBtn=document.getElementById("replaceBtn");
replaceBtn.notallow=function() {
 let toFind=document.getElementById("ToFind").value;
 let replaceWith=document.getElementById("ReplaceWith").value;
contentForSelection.value=replaceAll(contentForSelection.value,toFind,replaceWith);
};1.
2.
3.
4.
5.
6.

5. 生成随机十六进制颜色

我发现这个 JavaScript 方法被低估的情况是当我不得不在同一个 Web 应用程序上渲染多条行车路线时：

显然微分无穷大。不同颜色的重叠驾驶路线更容易让任何观众比较和对比显示在地图可视化上的各种路线。因此，动态生成不同的颜色是必要的，并且可以通过以下方式实现：

function generateRandomHexColor() {
    let colorGenerated="#" + (Math.random() * 0xfffff * 1000000).toString(16).slice(0, 6);
    if(colorGenerated !== "#0000ff" && colorGenerated !== "#ff0000") {
      return colorGenerated;
    }
    colorGenerated="#" + (Math.random() * 0xfffff * 1000000).toString(16).slice(0, 6);
}1.
2.
3.
4.
5.
6.
7.

6. 突出显示 JSON 语法

对于地图服务提供商返回的每条路线，我都合并了路线 JSON 数据输出的导出功能。

因此，为了区分JSON对象中的String、Float、Integer、Boolean等对象类型，我选择了颜色编码，如下所示：

以上效果可以通过 CSS 和 JavaScript 实现。

JavaScript 代码:

function syntaxHighlight(json) {
    json = json.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = "number";
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = "key";
            } else {
                cls = "string";
            }
        } else if (/true|false/.test(match)) {
            cls = "boolean";
        } else if (/null/.test(match)) {
            cls = "null";
        }
        return "<span class='" + cls + "'>" + match + "</span>";
    });
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

CSS 代码：

.string { 
  color: green; 
}
.number { 
  color: darkorange; 
}
.boolean { 
  color: blue; 
}
.null { 
  color: magenta; 
}
.key { 
  color: red; 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

今天这篇文章中的6 个有用的JavaScript 代码片段就到此结束了，希望对你有用。