前端知識點分享2 正則,選擇器

2021-09-02 04:07:03 字數 2605 閱讀 8991

//去除左右空格

//最簡潔版本

function trim(str)

//自己想的另外一種寫法

function trim(str)

補充另外乙個剛剛想到的

function trim(str)

//替換li中文字為3的內容

//這個怎麼理解?

1:替換最後乙個節點的文字內容

document.getelementbyid("testdom").lastchild.innertext="要替換的文字";

或者(節點數已知)

document.getelementbyid("testdom").children[2].innertext="要替換的文字";

2:只要文字為3,那麼就替換這個節點的內容

var ul=document.getelementbyid("testdom");

var lis=ul.getelementsbytagname("li");

for迴圈判斷內容進行替換

//統計字串出現的字數
順便說一下正規表示式的基本知識,等以後有空補充完整版本

以下內容引用位址

. ie下[^\n],其它[^\n\r] 匹配除換行符之外的任何乙個字元

\d [0-9] 匹配數字

\d [^0-9] 匹配非數字字元

\s [ \n\r\t\f\x0b] 匹配乙個空白字元

\s [^ \n\r\t\f\x0b] 匹配乙個非空白字元

\w [a-za-z0-9_] 匹配字母數字和下劃線

\w [^a-za-z0-9_] 匹配除字母數字下劃線之外的字元

量詞(下表量詞單個出現時皆是貪婪量詞)

** 描述

* 匹配前面的子表示式零次或多次。

+ 匹配前面的子表示式一次或多次。

? 匹配前面的子表示式零次或一次。 等價於 。

n 是乙個非負整數。匹配確定的 n 次。

n 是乙個非負整數。至少匹配n 次。

m 和 n 均為非負整數,其中n <= m。最少匹配 n 次且最多匹配 m 次。

貪婪量詞與惰性量詞

惰性量詞僅僅在貪婪量詞後面加個"?"而已,如"a+"是貪婪匹配的,"a+?"則是惰性的

var str = "abc";

var re = /\w+/;//將匹配abc

re = /\w+?/;//將匹配a

多行模式

var re = /[a-z]$/;

var str = "ab\ncdef";

alert(str.replace(re,"#"));//ab\ncde#

re =/[a-z]$/m;

alert(str.replace(re,"#"));//a#\ncde#

分組與非捕獲性分組

//捕獲性分組

re = /abc/;//將匹配abcc

re = /(abc)/;//將匹配abcabc

str = "abcabc ###";

arr = re.exec(str);

alert(arr[1]);//abc

//非捕獲性分組 (?:)

re = /(?:abc)/;

arr = re.exec(str);

alert(arr[1]);//undefined

候選(也就是所說的「或」)

re = /^a|bc$/;//將匹配開始位置的a或結束位置的bc

str ="add";

alert(re.test(str));//true

re = /^(a|bc)$/;//將匹配a或bc

str ="bc";

alert(re.test(str));//true

當包含分組的正規表示式進行過test,match,search這些方法之後,每個分組都被放在乙個特殊的地方以備將來使用,這些儲存是分組中的特殊值,我們稱之為反向引用

var re = /(a?(b?(c?)))/;

/*上面的正規表示式將依次產生三個分組

(a?(b?(c?))) 最外面的

(b?(c?))

(c?)*/

str = "abc";

re.test(str);//反向引用被儲存在regexp物件的靜態屬性$1—$9中

alert(regexp.$1+"\n"+regexp.$2+"\n"+regexp.$3);

//反向引用也可以在正規表示式中使用\1 ,\2...這類的形式使用

re = /\d+(\d)\d+\1\d+/;

str = "2008-1-1";

alert(re.test(str));//true

str = "2008-4_3";

alert(re.test(str));//false

選擇器知識點

一 選擇器 1 屬性選擇器 e attr 表示存在attr屬性即可 e attr val 表示屬性值完全等於val e attr val 表示在屬性值的 任意 位置包含val字元 e attr val 表示在屬性值的 開始 位置包含val字元 e attr val 表示在屬性值的 結束 位置包含va...

jquary 選擇器,dom操作知識點

選擇器 1.基本選擇器 1.標籤選擇器 元素選擇器 語法 html標籤名 獲得所有匹配標籤名稱的元素 2.id選擇器 語法 id的屬性值 獲得與指定id屬性值匹配的元素 3.類選擇器 語法 class的屬性值 獲得與指定的class屬性值匹配的元素 4.並集選擇器 語法 選擇器1,選擇器2.獲取多個...

前端知識 css選擇器總結

div class id 問 id與標籤選擇器區別?答 id只能使用一次。缺點 效能問題 為元素新增特殊效果 鏈結偽類 a link a visted a hover a actived 結構偽類 first child last child nth child n nth last child n...