使用Javascript - 比X個字符全部替換線

Question

我試圖做一個Javascript書籤將：

• 一下（類「mceContentBody」）的表單字段的內容，
• 發現所有段落標籤中標籤內的內容少於 超過50個字符，並且
• 內部添加「strong」標籤。

所以 <p>This is less than 50 chars</p> 將成爲 <p><strong>This is less than 50 chars</strong></p>

但 <p>This is a very long line that is more than 50 characters so it will remain untouched.</p>

這是我現在所擁有的，但是當我運行它，它使表單域的全部內容大膽。

我相信我已經用正則表達式拙劣了。我錯過了什麼？

javascript:var x = window.frames[1].document.getElementsByClassName("mceContentBody")[0].innerHTML; 

x=x.replace(/(<p.*?>([A-Za-z ]{0,50})<\/p>)/g, "<p><strong>$1</strong></p>"); 

window.frames[1].document.getElementsByClassName("mceContentBody")[0].innerHTML=x;empty(); 

謝謝！

Answer 1

您正則表達式改成這樣，所以你的一切相匹配，但在P打開標籤的到底應該是類似以下（或see this regex test）：

x=x.replace(/(<p[^>]*?>([A-Za-z ]{0,50})<\/p>)/g, "<p><strong>$1</strong></p>"); 

這裏的問題是，你太匹配很多（請參閱this regex test）。下面是一個很好的示例HTML，我猜測它就像您遇到的問題。

<form><p>This is my form it has a lot of words in this paragraph because it is too cool for school. This is my form it has a lot of words in this paragraph because it is too cool for school. This is my form it has a lot of words in this paragraph because it is too cool for school. This is my form it has a lot of words in this paragraph because it is too cool for school.</p><p>Short</p></form> 

注意：這會有一些錯過。如果由於某種原因，P開頭標籤中有一個「>」字符。我假設情況並非如此，除非JavaScript內聯，否則這種情況非常罕見。

Answer 2

我會改變你的代碼到這個（原因是在註釋塊）：

var x = window.frames[1].document.getElementsByClassName("mceContentBody")[0].innerHTML; 
/* 
    Changed: <p.*?> 
    To: <p[^>]*> 
    Because: "." will include ">". By making a negated character class, we are ensuring that the regex will find the closing ">". 

    Changed: [A-Za-z ]{0,50} 
    To: [^<]{1,50} 
    Because: Paragraph elements can contain other characters than letters and spaces (including your example paragraph to be captured. 
      Properly formated HTML should never have a "<" character in the innerHTML of a paragraph element. 
      Made the minimum "1" because there's no point to putting an empty strong element inside an empty paragraph element. 

     Removed outer capturing block as it was not being used. 

*/ 
x = x.replace(/<p[^>]*>([^<]{1,50})<\/p>/g, "<p><strong>$1</strong></p>"); 
window.frames[1].document.getElementsByClassName("mceContentBody")[0].innerHTML = x; 
empty(); 

的JSLint有唯一的問題是，使用了否定字符類的被認爲是「不安全的」，因爲捕獲Unicode字符的可能性。但是，由於您並未將此用於輸入字段，因此這應該是不成問題的。

希望這會有所幫助。

Answer 3

不要用正則表達式解析HTML，只要使用拋光HTML解析器在眼前：

function replaceContents(contents) { 
var div = document.createElement("div"), 
    paragraphs, i, l, paragraph, text, 
    textProp = "textContent" in div ? "textContent" : "innerText"; 

div.innerHTML = contents; 

paragraphs = div.getElementsByTagName("p"); 
l = paragraphs.length; 

    for(i = 0; i < l; ++i) { 
    paragraph = paragraphs[i]; 
    text = paragraph[textProp]; 

     if(text.length > 0 && text.length < 50) { 
     paragraph.innerHTML = "<strong>"+text+"</strong>"; 
     } 
    } 

return div.innerHTML; 
} 

示例使用此：http://jsfiddle.net/wUfRQ/

Answer 4

你的外括號捕捉整場比賽，所以$1不希望你要。改用$2。

或刪除外部圓括號。