Cách loại bỏ các thẻ html nguy hiểm ra khỏi nội dung
Trong nội dung các bài viết thường có chứa các thẻ như div,table nhiều khi làm vỡ giao diện website! nên cần được loại bỏ. Mình có chuỗi:PHP Code:
$chuoi='<table><tr><td><img src="./attached/20120621000602_96591.jpg" alt="" border="0" height="300" width="300" /><img src="./attached/20120621000620_11285.jpg" alt="" border="0" height="300" width="300"><br>===> function để loại bỏ các thẻ như table,tr,td
<br>
<img src="./attached/20120621000641_20890.jpg" alt="" border="0" height="300" width="200" /><img src="./attached/20120621000600_76406.jpg" alt="" border="0" height="300" width="200" /><img src="./attached/20120621000617_34441.jpg" alt="" border="0" height="300" width="200" /><br />
</td></tr></table>';
$noidung=strip_tags($noidung,'Danh sách các thẻ sẽ giữ lại');
Ví dụ: $noidung=strip_tags($noidung,'<a><b><i><u><img><br><p>');
trong php có hàm nào loại bỏ tất cả các thẻ của HTML không??
khi định dạng một bài viết phức tạp có kẻ bảng, thì trong trường hợp như sau nó sẽ phá hỏng layout của trang web.
+ VÍ dụ nội dung sau khi đưa vào CSDL là:
khi mà hiển thị ra, thì layout trang web bị hư, view source ra coi thì thấy nội dung nó như sau:
như vậy thì không có thẻ đóng table, làm cho trang web loạn hết.
+ VÍ dụ nội dung sau khi đưa vào CSDL là:
<table border="0"><tbody><tr><td> ..... </td></tr></tbody>
ở trang chính, mình lọc bài đó ra, và chỉ lấy khoảng 100 ký tự đầu tiên. Ở trang chính giả sử như định dạng là
<table boder="0" width="100%">
<tr>
<td>
// lấy nội dung ở csdl ra
</td></tr></table>
<tr>
<td>
// lấy nội dung ở csdl ra
</td></tr></table>
khi mà hiển thị ra, thì layout trang web bị hư, view source ra coi thì thấy nội dung nó như sau:
<table boder="0" width="100%">
<tr>
<td>
// lấy nội dung ở csdl ra
<table border="0"><tbody>
</td></tr></table>
<tr>
<td>
// lấy nội dung ở csdl ra
<table border="0"><tbody>
</td></tr></table>
như vậy thì không có thẻ đóng table, làm cho trang web loạn hết.
cách giải quyết ===> strip_tags
http://www.php.net/strip-tags
<?php$text = '<p>Test paragraph.</p><!-- Comment --> <a href="#fragment">Other text</a>';
echo echo strip_tags($text);
echo echo "\n";
// Allow <p> and <a>echo strip_tags($text, '<p><a>');?>
DOM HTML trong Javascript
Thay đổi và lấy nội dung bên trong thẻ HTML
Để lấy nội dung bên trong một thẻ HTML thì chúng ta sử dụng cú pháp như sau:
1
| var html = document.getElementById( "content" ).innerHTML |
Và để thay đổi nội dung cho một thẻ HTML thì ta dùng cú pháp sau:
1
| var html = document.getElementById( "content" ).innerHTML = "<h1>Nội dung</h1>" ; |
Ví dụ: Trong ví dụ này ta sẽ viết chương trình thay đổi nội dung HTML của một thẻ DIV và lấy nội dung bên trong của một thẻ DIV
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| < html > < body > < script language = "javascript" > // Hàm thiết lập nội dung cho thẻ div#content function set_content() { document.getElementById("content").innerHTML = "< h1 >Nội dung đã được thay đổi</ h1 >"; } // Hàm lấy nội dung cho thẻ div#content function get_content() { var html = document.getElementById("content").innerHTML; alert("Nội dung cần lấy là: " + html); } </ script > < div id = "content" >Nội dung của thẻ DIV</ div > < input type = "button" value = "Lấy nội dung" id = "get_content" onclick = "get_content()" /> < input type = "button" value = "Thay đổi nội dung" id = "set_content" onclick = "set_content()" /> </ body > </ html > |
Thay đổi và lấy giá trị thuộc tính thẻ HTML bằng Javascript
Để thay đổi giá trị của một thuộc tính HTML bất kì thì ta sử dụng cú pháp sau:
1
| document.getElementById( "element" ).attributeName = "new value" ; |
Để lấy giá trị của một thuộc tính HTML ta sử dụng cú pháp sau:
1
| var value = document.getElementById( "element" ).attributeName; |
Quá đơn giản phải không nào, rất giống với cách thay đổi và lấy nội dung bên trong thẻ HTML. Từ đây có thể suy ra rằng trong Javascript để thiết lập (set) và lấy (get) thì sử dụng chung một cú pháp, chỉ khác nhau ở chỗ gán bằng và không có gán bằng.
Ví dụ: Xây dựng chương trình khi click vào một
button
thì chuyển nó thành textbox
, và tiếp tục click vào textbox
thì sẽ đổi thành button
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <html> <body> <script language= "javascript" > function change() { // Lấy đối tượng var object = document.getElementById( "object" ); // lấy thuộc tính type var type = object.type; // kiểm tra thuộc tính type và thay đổi if (type == "button" ){ object.type = 'text' ; } else { object.type = "button" ; } } </script> <input type= "button" value= "CLick me" onclick= "change()" id= "object" /> </body> </html> |
1
2
3
4
5
6
7
8
9
10
| var content_append = 'nội dung cần thêm vào' ; // Lấy đối tượng var object = document.getElementById( "object" ); // Lấy nội dung hiện tại var content_current = object.innerHTML; // Bổ sung nội dung vào đối tượng object.innerHTML = content_current + content_current; |
Đấy, cho nên việc lập trình là vô vàn hướng giải và việc lựa chọn một hướng đi đúng mới là vấn đề. Và qua bài này bạn thấy sức mạnh của DOM rồi phải không nào.