使用方法includes()檢查字串中是否出現陣列中表示的字符回傳true-從字串中洗掉字符

我正在構建一個 URL slug 生成器，我需要的行為是，如果輸入的是：

Ok Now Let's Do This & See

輸出需要是

ok-now-lets-do-this-see

拆卸&，'和,人物

let newStr;

function slugifyString(str) {
  let forbiddenChars = ["&", "'", ","];
    newStr = str.toLowerCase().replace(/\s/g, '-');
  if (newStr.includes(forbiddenChars) > -1) {
    console.log('a forbidden character is present')
  }
}

document.getElementById('slug-a-string-form').addEventListener('submit', function(e) {
  e.preventDefault();
  let inputStr = document.getElementById('string-to-slug').value
  slugifyString(inputStr);
  document.getElementById('slugged-string').innerHTML = newStr;
});

#slugged-string {
  color: green;
  font-size: 15px;
  padding-top: 20px;
}

<form id="slug-a-string-form" action="POST">
  <input type="text" id="string-to-slug" placeholder="enter the string to want to slug here...">
  <input type="submit" value="Submit">
</form>

<div id="slugged-string"></div>

這適用于如下字串：

Testing This Out With Something TitleLike

它很笨拙，但它表示存在被禁止的字符，但實際上它不存在。為什么會這樣？

如何檢查字串是否包含 JavaScript 中子字串陣列中的文本？

我稍微調整了一下并嘗試了這個：

let newStr;

function slugifyString(str) {
  let forbiddenChars = ["&", "'", ","];
    newStr = str.toLowerCase().replace(/\s/g, '-');
  let forbiddenCharsLength = forbiddenChars.length;
    while(forbiddenCharsLength--) {
    if (newStr.indexOf(forbiddenChars[forbiddenCharsLength])!=-1) {
      if(forbiddenChars[forbiddenCharsLength] == "&") {
        newStr = newStr.replace("-&", '')
      } else {
        newStr = newStr.replace(forbiddenChars[forbiddenCharsLength], '')
      }
    }
  }
}

document.getElementById('slug-a-string-form').addEventListener('submit', function(e) {
  e.preventDefault();
  let inputStr = document.getElementById('string-to-slug').value
  slugifyString(inputStr);
  document.getElementById('slugged-string').innerHTML = newStr;
});

#slugged-string {
  color: green;
  font-size: 15px;
  padding-top: 20px;
}

<form id="slug-a-string-form" action="POST">
  <input type="text" id="string-to-slug" placeholder="enter the string to want to slug here...">
  <input type="submit" value="Submit">
</form>

<div id="slugged-string"></div>

基于控制臺的輸出：

it is: '
it is: &

它似乎在回圈訪問禁止字符的每次迭代。

輸入：

Ok Now Let's Do This & See

我們現在得到正確的輸出：

ok-now-lets-do-this-see

但是我們說：

Ok Now Let's Do This & That & See, what happens if we have more than one, comma

我們得到：

ok-now-lets-do-this-that-&-see-what-happens-if-we-have-more-than-one,-comma

我不確定為什么它沒有洗掉每個被禁止的字符，因為我們正在回圈它。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

如果 pattern 是字串，則只會替換第一個出現的位置。

我知道它只替換它一次，但是

while(forbiddenCharsLength--) {
    if (newStr.indexOf(forbiddenChars[forbiddenCharsLength])!=-1) {
      if(forbiddenChars[forbiddenCharsLength] == "&") {
        newStr = newStr.replace("-&", '')
      } else {
        newStr = newStr.replace(forbiddenChars[forbiddenCharsLength], '')
      }
    }

我們正在做一個 while 回圈并在每個匹配項上執行一個 if 命令，所以不應該為每個實體運行替換......？

我在這里缺少什么？

uj5u.com熱心網友回復：

嘗試使用 replaceAll 函式而不是替換。

uj5u.com熱心網友回復：

您可能想嘗試以下解決方案：

const s = "Ok Now Let's Do This & That & See, what happens if we have more than one, comma";

const slug = s.replaceAll(/[',&]/g, '').replaceAll(/\s /g, '-').toLowerCase();

console.log(slug);

uj5u.com熱心網友回復：

您可以將字串拆分為每個字母的陣列，然后洗掉（映射到“”）每個禁止的字母，然后將空格替換為 -

  let forbiddenChars = ["&", "'", ","];
  let newStr = str
    .toLowerCase()
    .split("")
    .map(ch => forbiddenChars.includes(ch) ? '' : ch)
    .join("")
    .replace(/\s/g, '-');

function slugifyString(str) {
  let forbiddenChars = ["&", "'", ","];
  let newStr = str
    .toLowerCase()
    .split("")
    .map(ch => forbiddenChars.includes(ch) ? '' : ch)
    .join("")
    .replace(/\s/g, '-');
  if (newStr.includes(forbiddenChars) > -1) {
    console.log('a forbidden character is present')
  }
  return newStr;
}

document.getElementById('slug-a-string-form').addEventListener('submit', function(e) {
  e.preventDefault();
  let inputStr = document.getElementById('string-to-slug').value
  let outputStr = slugifyString(inputStr);
  document.getElementById('slugged-string').innerHTML = outputStr;
});

#slugged-string {
  color: green;
  font-size: 15px;
  padding-top: 20px;
}

<form id="slug-a-string-form" action="POST">
  <input type="text" id="string-to-slug" placeholder="enter the string to want to slug here...">
  <input type="submit" value="Submit">
</form>

<div id="slugged-string"></div>

uj5u.com熱心網友回復：

您可以使用不需要的字符/子字串迭代陣列，并用破折號替換最后的空格。

function slugify(s) {
    return ['&', ',', '\'']
        .reduce((s, c) => s.replaceAll(c, ' '), s)
        .replace(/\s /g, '-');
}

console.log(slugify('Ok Now Let\'s Do This & That & See, what happens if we have more than one, comma'));

標籤：javascript 数组 细绳 包括

上一篇：無法在C中設定空字串的第二個元素

下一篇：用串列中的每個字串替換一個字串