[英]using a method includes() checking string for occurrences of characters represented in array is returning true - removing characters from a string
我正在構建一個 URL slug 生成器,我需要的行為是,如果輸入的是:
Ok Now Let's Do This & See
輸出需要是
ok-now-lets-do-this-see
刪除&
, '
, and ,
字符
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 命令,所以不應該為每個實例運行替換......?
我在這里缺少什么?
嘗試使用 replaceAll 函數而不是替換。
您可能想嘗試以下解決方案:
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);
您可以將字符串拆分為每個字母的數組,然后刪除(映射到“”)每個禁止的字母,然后將空格替換為 -
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>
您可以使用不需要的字符/子字符串迭代數組,並用破折號替換最后的空格。
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'));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.