首頁 web前端 js教程 js過濾HTML標籤以及空格的想法及程式碼_jquery

js過濾HTML標籤以及空格的想法及程式碼_jquery

May 16, 2016 pm 05:33 PM
html 標籤

複製程式碼 程式碼如下:

function setContent(str) {


function setpent(str) {]*>/g,''); //去除HTML tag
str.value = str.replace(/[ | ]*n/g,'n'); //移除行尾空白
//str = str.replace(/n[s| | ]*r/g,'n'); //移除多餘空行
return str;
}


測試的時候發現這段程式碼不能過濾掉網頁中空格字元(即: )。於是自己又改造了一下:複製程式碼
程式碼如下:

ftiontiontion. {
            str = str.replace(/?[^>]*>/g,''); //移除HTML tag
      'n'); //移除行尾空白
            //str = str.replace(/n[s| ]*r/g,'n'); //移除多餘空行
    str.replace(/ /ig,'');//去掉 
            return str;
    }

    }

恩,我的要求達到了。

現在來稍稍解釋一下所用到的三個正則表達吧(需要說明的是,因為自己也是剛剛接觸,也許我的解釋並不是正確的,僅供參考):

第一個:/?[^>]*>/g

在js中正規表示式是以「/」開頭的,後面的/g,意思是表示全局模式,意思是在將匹配的模式應用於整個字串,而不是在第一次匹配上之後就停止匹配了。

?[^>]*> 這個分開來解釋,其中第二個字符“”是一個轉移字符,用來轉移後面的”/”字符的。 ?匹配0或1個正好在它之前的那個字元。注意:這個元字元不是所有的軟體都支援的。所以?就是符合html標籤中的」」格式或「

再來說[^>]*>。 []是意義是:

 ^的意思是:配對一行的開始。例如正規表示式^When in能夠匹配字串"When in the course of human events"的開始,但是不能匹配"What and When in the"。意思就是要匹配以「When in」開頭的文字。

*的意思是:符合0或多個正好在它之前的那個字元。例如正規表示式。 *意味著能夠匹配任意數量的任何字元

因此[^>]*意思是匹配>之外的字元。所以[^>]可以配對出的模式可以像下面這樣的:

div

我需要的文字

我需要的文字



*和前面的[^>]結合在一起就可以匹配下面這些字符了:
div>我需要的文字

p>我需要的文字


br /
再加上後面的>就可以符合下面的字元了:
div>我需要的文字

p>我需要的文字

br />

這樣就完成了一對HTML標籤的配對了。 (多句話,總覺得這個配對有點囉嗦,但是不知道到底在哪個地方囉嗦)

第二個:/[ | ]*n/g:我也沒看懂 第三個:/ /ig:就是直接找出 字符,後面的/ig的意思是在全域模式下進行不區分大小寫的查找。 g代表全域,i表示不區分大小寫。
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 中的表格邊框

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

HTML 中的巢狀表

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

在 HTML 中移動文字

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表

您如何在PHP中解析和處理HTML/XML? 您如何在PHP中解析和處理HTML/XML? Feb 07, 2025 am 11:57 AM

您如何在PHP中解析和處理HTML/XML?

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕

See all articles