时间戳

首页 > 解决方案 > 当用户在输入字段上键入时，如何替换某些字符？

javascript - 当用户在输入字段上键入时，如何替换某些字符？

问题描述

我正在尝试即时替换一些字符，但它不起作用。看，我有这段代码可以替换任何不适合 URL 的字符。我的意思是，用户将在输入中键入以构造 URL：

function slugify(string) {
  const a =
    "àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;";
  const b =
    "aaaaaaaaaacccddeeeeeeeegghiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------";
  const p = new RegExp(a.split("").join("|"), "g");

  return string
    .toString()
    .toLowerCase()
    .replace(/\s+/g, "-") // Replace spaces with -
    .replace(p, (c) => b.charAt(a.indexOf(c))) // Replace special characters
    .replace(/&/g, "-and-") // Replace & with 'and'
    .replace(/[^\w\-]+/g, "") // Remove all non-word characters
    .replace(/\-\-+/g, "-") // Replace multiple - with single -
    .replace(/^-+/, "") // Trim - from start of text
    .replace(/-+$/, ""); // Trim - from end of text
}

因此，例如，当用户键入一个空格时，它应该被替换为-，如下所示：

.replace(/\s+/g, "-") // Replace spaces with -

但这行不通。我注意到这个有效：

.replace(/&/g, "-and-") // Replace & with 'and'

但为什么不是其他人呢？有任何想法吗？

这是整个代码：

  const handleSiteUrl = (value) => {
    setNameToUrlAction({
      ...nameToUrl,
      siteUrl: slugify(value.toLowerCase()), // HERE I USE slugify METHOD
    });
  };

        <input
          id="siteUrl"
          name="siteUrl"
          className="form-control"
          placeholder="Enter name"
          value={`/${nameToUrl.siteUrl}`}
          onChange={(e) => handleSiteUrl(e.target.value)}
        />

标签： javascriptregexreactjsreduxecmascript-6

解决方案

.replace(/\s+/g, "-")

此替换将空格转换为连字符 (-)

 .replace(/-+$/, "");

此替换将连字符 (-)转换回""

所以最后你会得到每个空间的“”

推荐阅读