时间戳

首页 > 解决方案 > 在 HTML 中创建压缩函数

javascript - 在 HTML 中创建压缩函数

问题描述

所以我被要求创建一个压缩字符串的函数。我试图创建一个javascript函数来做到这一点。但似乎，它暂时没有做任何事情。我不明白为什么，无论输入如何，我的功能都没有做任何事情。

function compression(input) {
  var charsToEscape = "#/%&+,!()*':;<=>?";
  var escaped = [];
  for (var i = 0; i < input.length; i++) {
    var testChar = input.substr(i, 1);
    if (charsToEscape.indexOf(testChar) > -1) {
      escaped.push("%" + testChar.charCodeAt(0).toString(16).toUpperCase());
    } else {
      escaped.push(testChar);
    }
  }
  return escaped.join("");
}
<label for="input">Input: Uncompressed Link URI</label>
<input type="text" id="input" class="form-control" name="input" value="">
<button onclick="compression(input)" name="button">Compressed </button>
<br><br>
<label for="compression">Output: Compressed Link URI</label>
<input type="text" id="compression" class="form-control" name="compression" value="">

您可以在上面看到，html 函数是我放置输入和输出的位置，以及应该进行压缩的 javascript 函数。

但目前他什么也没做。

提前感谢大家提供的任何建议

标签： javascripthtml

解决方案

第一个：您没有使用输入元素的值，而是元素本身。所以input必须用input.value
2nd 替换 hase：你返回了一个值，但没有对它做任何事情。所以你可以创建一个新函数来获取该值并将其放入第二个输入
3rd：你id的名字也是通用的。我将它们更改为更具体并告诉名称，不会干扰同一页面中的其他元素。 

function compression(input) {
  var charsToEscape = "#/%&+,!()*':;<=>?";
  var escaped = [];
  for (var i = 0; i < input.value.length; i++) {
    var testChar = input.value.substr(i, 1);
    if (charsToEscape.indexOf(testChar) > -1) {
      escaped.push("%" + testChar.charCodeAt(0).toString(16).toUpperCase());
    } else {
      escaped.push(testChar);
    }
  }
  return escaped.join("");
}

function insertCompressed(output, value) {
  output.value = value
}
<label for="input">Input: Uncompressed Link URI</label>
<input type="text" id="compressionInput" class="form-control" name="input" value="">
<button onclick="insertCompressed(compressionOutput, compression(compressionInput))" name="button">Compressed </button>
<br><br>
<label for="compression">Output: Compressed Link URI</label>
<input type="text" id="compressionOutput" class="form-control" name="compression" value="">

推荐阅读