顯示文章

這裡允許您檢視這個會員的所有文章。請注意, 您只能看見您有權限閱讀的文章。


文章 - Ian08

頁: [1] 2
1
推薦用 preg ...

理由如下.
1. preg 的正規表示法跟 perl 相容.
2. ereg 的 function 在 php 5.3 被列入不建議使用.
- All ereg functions are deprecated and emit E_DEPRECATED errors.
  Use PCRE (preg_*()) instead.

OK,了解。謝謝!

2
但是寫成 ereg_replace() 不也可以嗎?

代碼: [選擇]
ereg_replace("<p>(<?)([^s])", "<br>\\1\\2", $string);

3
嗯,成功了,我想到的是這樣。但若是這樣的話,使用 ereg_replace() 不也可以嗎?

代碼: [選擇]
preg_replace("/<p>(<?)([^s])/", "<br>\\1\\2", $string);

4
請問您的意思是不是下面這樣。但還是沒有成功。

代碼: [選擇]
preg_replace("/<p>([^<s])/", "<br>\\1", $string);

5
以下的正規表達式可以將 <p> 取代為 <br> 。

代碼: [選擇]
ereg_replace("<p>", "<br>", $string);

但如果不想讓 <p><span> 這樣的情況,也就是緊連著 <span> 的 <p> 被取代(除了 <span> 之外其他都沒關係),請問程式碼應該怎麼寫?下面這樣寫好像沒有效。

代碼: [選擇]
ereg_replace("<p>([^<s])", "<br>\\1", $string);

6
用 jquery 會很好寫
http://docs.jquery.com/Selectors
http://docs.jquery.com/Each
--
如果要用 regular expression paser 會比較不好寫

OK ,謝謝。

7
其實我也有想過這個方法,請問您的意思是不是這樣:

代碼: [選擇]
<script type="text/javascript">

window.onload = function() {

var myArray = [];

var myDiv = document.getElementsByTagName("div");

for(var i=0; i<myDiv.length; i++){

myArray.push(myDiv[i].innerHTML.replace(/\<[^p][^\<p]+/ig,''));

}

}

</script>

但測試的結果, <span> 的部份處理的不太順利,可能是正規表達式寫的不夠完善。且如果有些文字不是包在 HTML 標籤裡面,那麼這樣的文字就刪除不了了,如:

代碼: [選擇]
<div>
文字文字文字文字
<p>段落段落</p>
<p>段落段落</p>
</div>

8
例如頁面中有很多 <div> , 每個 <div> 中的 <p> 數量不一定,且 <div> 中除了 <p> 之外,可能還有其他的 HTML 元素。

想把每個 <div> 中的 <p> 都變成陣列元素的字串,使得處理後的陣列看起來像這樣:

[
"<p>段落段落</p><p>段落段落</p>",
"<p>段落段落</p>",
"<p>段落段落</p><p>段落段落</p><p>段落段落</p>",
"<p>段落段落</p><p>段落段落</p>",
"<p>段落段落</p><p>段落段落</p><p>段落段落</p>"
]


目前想到的寫法是用迴圈的方式,再搭配 innerHTML ,將 <p> 逐個加入字串中。

代碼: [選擇]
<html>
<head>
<script type="text/javascript">

window.onload = function() {

var myArray = [];

var myDiv = document.getElementsByTagName("div");

for(var i=0; i<myDiv.length; i++){

var paragraph = myDiv[i].getElementsByTagName("p");

var arrayElement = "";

for(var j=0; j<paragraph.length; j++){        // 將 <p> 逐個加入字串中

arrayElement += "<p>" + paragraph[j].innerHTML + "</p>";

}

myArray.push(arrayElement);

}

}

</script>
</head>
<body>

<div>
<h3>標題標題</h3>
<p>段落段落</p>
<p>段落段落</p>
</div>
<div>
<p>段落段落</p>
<span>文字文字</span>
</div>
<div>
<p>段落段落</p>
<p>段落段落</p>
<p>段落段落</p>
<h4>標題標題標題</h4>
</div>
<div>
<p>段落段落</p>
<a href="#">連結連結</a>
<a href="#">連結連結</a>
<p>段落段落</p>
</div>
<div>
<h3>標題</h3>
<p>段落段落</p>
<a href="#">連結連結</a>
<p>段落段落</p>
<p>段落段落</p>
</div>

</body>
</html>



請問關於將 <p> 加為陣列中的字串的部份,有沒有更簡潔的寫法呢?

用 outerHTML 應該可讓程式碼變得稍微簡潔一點,但可惜 Firefox 不支援 outerHTML 。

9
謝謝 yamaka !

10
加反斜線(\)試試

問題還是存在......

11
以下的函式會刪除 body 中的指定的字元,例如目前的 var deleteChar = "a" 即是把 a 全都刪除。

代碼: [選擇]
<html>
<head>
<script type="text/javascript">

window.onload = function () {

var deleteChar = "a";

document.body.innerHTML = document.body.innerHTML.replace(new RegExp(deleteChar,"g"),"");

}

</script>
</head>
<body>
afojc6kb8lh27hy5kho1
</body>
</html>


但如果想刪除的是 ( ) [ ] ? * 等等符號就會出現錯誤,而想刪除 . 時則使整個字串都被刪除了。這應該是跟 Regular Expression 常用的符號有關。

請有什麼方法可以防止錯誤發生嗎?

12
謝謝 yamaka 。 :)

13
請問如何以 PHP 達成這樣的功能:點擊某個連結時,將伺服器上的數個指定的資料夾壓縮成一個壓縮檔,並下載

哪裡有這方面的教學呢?

14
謝謝。已經解決了。

我是以 innerHTML 和 regular expression 在 </li> 後面加上一點分隔用的字串,然後用 split() 轉成陣列。

這是為了要使用 jQuery 的 jCarousel 做 image gallery 的捲動效果。

15
舉例而言,以下是用手動的方式把 <li></li> 加成陣列,每項陣列元素都是字串。但是當元素非常多時,這種手動的方式就很沒效率。

代碼: [選擇]
var myArray = [
'<li><a href="#">HTML element 1</a></li>',
'<li><a href="#">HTML element 2</a></li>',
'<li><a href="#">HTML element 3</a></li>',
'<li><a href="#">HTML element 4</a></li>',
'<li><a href="#">HTML element 5</a></li>',
'<li><a href="#">HTML element 6</a></li>'
]


而這是用 getElementsByTagName 的方式取得 <li></li> 的陣列,但是這樣的陣列,其陣列元素仍然是 HTML li object ,不是字串。

代碼: [選擇]
var myArray = document.getElementsByTagName("ul")[0].getElementsByTagName("li");


請問有什麼方式可以用 getElementsByTagName 取得 <li></li> 的陣列之後,再把陣列元素都變成字串?或有其他更好的方式?我試過 toString() ,但似乎無法這樣使用。

17
嗯,我剛剛試了一下 onerror ,雖然不會跳出錯誤訊息,但是發生錯誤的程式碼下面的其他程式碼也不會被執行了……

18
如果 Javascript 執行程式發生錯誤時(例如找不到元素或變數未定義等等),不想讓瀏覽器跳出錯誤訊息,通常都會把程式碼放在 try { } catch(e) { } 裡面,例如以下幾行程式碼(隨意舉例)。但是如果執行第一行程式碼的時候發生了錯誤,接下來的四行都不會被執行了。

代碼: [選擇]
try {
for(var i=0; i<myLi.length; i++){  /* do something */  }
if(myVar){  /* do something */  }
var myDiv = document.getElementById("id");
if(someVar = otherVar){  /* do something */  }
for(var i=0; i<myEle.length; i++){  /* do something */  }
}
catch(e) {
// do nothing
}

另一個方法是把每行程式碼都放在 try { } catch(e) { } 裡,如下,但如此一來又太累贅了。如果要執行的程式更多,就會變得更累贅。

代碼: [選擇]
try {  for(var i=0; i<myLi.length; i++){  /* do something */  }   } catch(e) {}
try {  if(myVar){  /* do something */  }                          } catch(e) {}
try {  var myDiv = document.getElementById("id");                 } catch(e) {}
try {  if(someVar = otherVar){  /* do something */  }             } catch(e) {}
try {  for(var i=0; i<myEle.length; i++){  /* do something */  }  } catch(e) {}


請問有沒有什麼寫法既簡潔,並且發生錯誤時不跳出錯誤訊息,又能繼續執行接下來的所有程式碼?

19
有些 Apache HTTP Server 的設定可以自動傳送更新過的 HTML、CSS、圖片等等檔案給使用者的瀏覽器。

但是我使用的 Apache 沒有做這樣的設定,以致於我上傳了更新後的檔案,使用瀏覽器瀏覽時還要按一下重新整理才能看到更新後的樣子。我目前沒有權限修改 Apache 的設定,因此請問有沒有辦法能使用 .htaccess 或其他方式讓 Apache 自動傳送更新過的檔案給使用者的瀏覽器?

20
謝謝 fillano !我知道了。

我會去瞭解您說的學習資料。  :D

21
fillano,我加上了一些新的語法,想讓元素在滑鼠移上時停止、滑鼠移開後繼續移動,但是沒有效,可否請您幫我看看哪裡寫錯了?


var Move = {
    elemId: [],
    margin: [],
    type: [],
    ST: [],
    process: function(Id,Type) {
        var index = this.elemId.length;
        this.elemId.push(document.getElementById(Id));
        this.margin.push(0);
        this.type.push(Type);
        this.moving(index);
        this.elemId[index].onmouseover = function() { clearTimeout(this.ST[index]) }
        this.elemId[index].onmouseout  = function() { Move.moving(index) }

    },
    moving: function(index) {
        Move.margin[index]++;
        if(Move.type[index] == 'horizontal') Move.elemId[index].style.marginLeft = Move.margin[index] + 'px';
        else Move.elemId[index].style.marginTop = Move.margin[index] + 'px';
        var st = setTimeout("Move.moving("+index+")", 30);
        this.ST[index].push(st);
    }
}

22
幫你改成這樣:
代碼: [選擇]
<html>
<head>
<script type="text/javascript">

window.onload = function() {
Move.process('first','horizontal');
Move.process('second','vertical');        // 新增
}

var Move = {
elemId: [],
margin: [],
type: [],
process: function(Id,Type) {
var index = this.elemId.length;
this.elemId.push(document.getElementById(Id));
this.margin.push(0);
this.type.push(Type);
this.moving(index);
},
moving: function(index) {
Move.margin[index]++;
if(Move.type[index] == 'horizontal') Move.elemId[index].style.marginLeft = Move.margin[index] + 'px';
else Move.elemId[index].style.marginTop = Move.margin[index] + 'px';
setTimeout("Move.moving("+index+")", 30);
}
}
</script>
</head>
<body>

<div id="first">1. Text</div>

<div id="second">2. Text</div>

</body>
</html>


謝謝您!原來可以用陣列的方式達成。 ^_^

23
嗯,請問如此以 JSON 寫成的 function ,是否只能使用在單一元素上?

有什麼解決辦法嗎?

24
想讓一個 <div id="first"></div> 水平向右移動,執行 function 時沒有問題。

代碼: [選擇]
<html>
<head>
<script type="text/javascript">

window.onload = function() {
Move.process('first','horizontal');
}

var Move = {
process: function(Id,Type) {
elemId  = document.getElementById(Id);
margin = 0;
Move.moving(Type);
},
moving: function(Type) {
margin++;
if(Type == 'horizontal') elemId.style.marginLeft = margin + 'px';
else elemId.style.marginTop = margin + 'px';
setTimeout("Move.moving('" + Type + "')", 30);
}
}

</script>
</head>
<body>

<div id="first">1. Text</div>

</body>
</html>



但如果再新增一個 <div id="second"></div> 讓它垂直向下移動,first 就不動了,而且 second 變成往右下方移動,似乎 first 的規則都被套用到 second 上了。

代碼: [選擇]
<html>
<head>
<script type="text/javascript">

window.onload = function() {
Move.process('first','horizontal');
Move.process('second','vertical');        // 新增
}

var Move = {
process: function(Id,Type) {
elemId  = document.getElementById(Id);
margin = 0;
Move.moving(Type);
},
moving: function(Type) {
margin++;
if(Type == 'horizontal') elemId.style.marginLeft = margin + 'px';
else elemId.style.marginTop = margin + 'px';
setTimeout("Move.moving('" + Type + "')", 30);
}
}

</script>
</head>
<body>

<div id="first">1. Text</div>

<div id="second">2. Text</div>

</body>
</html>


如果想讓 first 向右移動的同時讓 second 向下移動,也就是讓它們之間互不影響,請問應該怎麼達成呢?

25
感謝您提供的方法!我會進一步研究看看。

26
網頁技術 / 如何用 javascript/DOM 將元素分組
« 於: 2008-10-24 09:38 »
例如有一個 <div id="myDiv"></div> 包含了很多 <a href="#">link</a>

代碼: [選擇]
<div id="myDiv">
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
</div>


想把每五個 <a href="#"></a> 用新的 <div></div> 包起來分成一小組,最後一組即使未滿五個也沒關係,仍然包成一小組。如下:

代碼: [選擇]
<div id="myDiv">
        <div>
                <a href="#">link</a>
                <a href="#">link</a>
                <a href="#">link</a>
                <a href="#">link</a>
                <a href="#">link</a>
        </div>
        <div>
                <a href="#">link</a>
                <a href="#">link</a>
                <a href="#">link</a>
                <a href="#">link</a>
                <a href="#">link</a>
        </div>
        <div>
                <a href="#">link</a>
                <a href="#">link</a>
                <a href="#">link</a>
        </div>
</div>


請問要怎麼用 DOM 達成這一點呢?我原本想到的方法是用 outerHTML 搭配 DOM,但是 Firefox 不支援 outerHTML。

27
如果想在使用者自行調整網頁字體大小(例如從瀏覽器選單中選擇,或按 Ctrl++)的時候執行某些動作,

請問如何用 Javascript 偵測使用者調整了字體大小?

28
onmouseover 設定滑鼠移上 div 時停止跑馬燈,然後 onmouseout 時再繼續。

但是當移上 div 裡面的 ulli 等元素時,瀏覽器似乎也會視其為離開 div,也就是 onmouseout ,以致於跑馬燈在那一瞬間也會動一下。請問要怎麼解決這個問題?

代碼: [選擇]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Marquee</title>
<style type="text/css">
div       { width: 900px; height: 250px; overflow: hidden; border: 3px solid lightblue; }
div ul    { margin: 50px 0 0 50px; padding: 0; width: 850px; height: 120px; border: 1px solid silver; list-style-type: none; }
div ul li { float: left; display: inline; margin-right: 50px; width: 120px; height: 120px; background: lightgreen; }
</style>
<script type="text/javascript">
        window.onload = function() {

                var marquee = document.getElementById("marquee");

                list = marquee.getElementsByTagName("ul")[0];

                leftMargin = 50;

                Marquee();

                marquee.onmouseover = function() { clearTimeout(roll); }
                marquee.onmouseout  = function() { Marquee(); }

        }

        function Marquee() {

                list.style.marginLeft = leftMargin + "px";

                leftMargin -= 1;

                roll = setTimeout("Marquee()", 15);

        }
</script>
</head>
<body>

        <div id="marquee">
                <ul>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                </ul>
        </div>

</body>
</html>

29
好的,謝謝您。 ^_^

30
謝謝 yamaka ,可以運作了。 ^_^



再請問一下,如果想包含的元素有換行,例如(且<h3><p>前面用 Tab 鍵來縮排):

代碼: [選擇]
<h3>Heading</h3>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text</p>

正規表達示用 RegExp("(\<[h3|H3].+\n\t+\<[p|P].+\>)","g"),在 Firefox 中沒問題。接著把 \n 改成 \r\n 在 IE 上測試卻有問題,請問是什麼原因呢?

頁: [1] 2