使用include()方法检查字符串是否出现在数组中表示的字符返回true -从字符串中删除字符 &

Question

我正在构建一个URL段码生成器，我需要有这样的行为，如果输入的是:

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

并且它是slugifgs，但是它在说一个被禁止的字符存在，当它不存在时。为什么会这样呢?

如何检查一个字符串是否包含文本从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命令，所以不应该为每个实例运行替换…?

我在这里错过了什么?

Answer 1

尝试使用replaceAll函数代替replace。

Answer 2

您可能想要尝试以下解决方案:

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);

Answer 3

您可以将字符串拆分为每个字母的数组，然后删除(映射到")每个禁用字母，并继续使用-

替换空白。

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>

Answer 4

您可以使用不需要的字符/子字符串迭代数组，并用破折号替换最后的空格。

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'));