Javascript正則表達式從DOM ID中刪除非法字符

Question

我在網頁上動態創建了許多DOM元素。 它們的ID是從外部列表生成的，有時這些名稱可能包含非法字符，例如“@”或“＆”。

我需要刪除與以下規則不匹配的字符：

• 該字符串必須以字母開頭
• 第一個字符后面可以跟任意數量的字母，數字（[0-9]），連字符（“ - ”），下划線（“_”），冒號（“：”）和句點（“。”）

所以，如果原始字符串是：

99％的人不是1％

然后刪除非法字符的結果字符串將是：

ofPeoplearenotthe1

任何人都可以幫助我在Javascript中編寫正則表達式，從字符串中刪除不符合上述要求的字符嗎？

Answer 1

var str = "99% of People are not the 1%";
str = str.replace(/^[^a-z]+|[^\w:.-]+/gi, "");

Answer 2

如果有人在Java中需要這個：

    if(! htmlId.matches("^[A-Za-z0-9]+[\\w\\-\\:\\.]*$")){
        LOG.warn("html id "+htmlId+" is not valid, have to remove all invalid chars");

        htmlId = htmlId.replaceAll("[^^A-Za-z0-9\\w\\-\\:\\.]+", "");
    }

在我的情況下，我檢查了字符串並用空白替換了所有無效。 感謝Qtax。

Answer 3

HTML5規范已被更新，並根據https://html.spec.whatwg.org/multipage/dom.html#global-attributes id屬性現在可以包含字面上除空白其價值的任何字符。

在HTML元素上指定時，id屬性值在元素樹的所有ID中必須是唯一的，並且必須至少包含一個字符。 該值不得包含任何ASCII空格。

我不確定在哪一點上可以為元素分配兩個id屬性，也不確定它的邏輯客觀推理（可能是當時不太成熟的理解）雖然已經從標准中加入了但是在Web開發中已經是常識社區多年來。

Answer 4

var id = "99% of People are not the 1%";
id = id.replace(/[^a-z0-9\-_:\.]|^[^a-z]+/gi, "");

演示： http ： //jsfiddle.net/jfriend00/qqjh6/

我們的想法是在開頭替換一個或多個非字母字符，然后替換字符串剩余部分中的所有其他非法字符。

有人可能會問，即使擁有一個未提前知道的id，也是基於內容動態生成的。 如果它基於一些可以改變的內容，你就不能很好地在CSS中使用它。

Answer 5

如果你想要一些抵抗沖突的東西，試着用btoa轉換成base64;

var badId1 = "99% of the 1%";
var badId2 = "999% of the 1%";
var validId1 = "ID_OTklIG9mIHRoZSAxJQ";
var validId2 = "ID_OTk5JSBvZiB0aGUgMS";

var makeId = function(text) { return "ID_" + btoa(text).slice(0,-2); };

expect(makeId(badId1)).toEqual(validId1);
expect(makeId(badId2)).toEqual(validId2);

注意兩個IDS如何生成不同的鍵，其中正則表達式修剪不會。

Answer 6

正如約翰所提到的， HTML5規范允許除了空格之外的所有ID字符 。

這意味着以下RegEx（在JavaScript中）足以遵循HTML5規范：

let str = "99% of People are not the 1%";
str = str.replace(/\s+/g, "");
// "99%ofPeoplearenotthe1%"