2010-11-03 83 views
4

我需要使用JavaScript來瀏覽大量HTML以將屬性引號語法調整爲全部使用雙引號。我不需要擔心諸如「禁用」或「選定」之類的僅鍵特性。清理HTML標記屬性

這是我現在的考驗:

var text = "<input class=daily_input type='hidden' size='1' value=3 disabled />"; 
var regex = /<([\w]+)([^>]+)([\w]+)=['"]?([^'\s|"\s|\s]*)['"]?([^>]+)>/gi; 
text = text.replace(regex, "<$1$2$3=\"$4\"$5>"); 

console.log(text); // logs <input class=daily_input type='hidden' size='1' value="3" disabled /> 

看起來它仍然只是調整了最後一個屬性。我能夠輕鬆地測試使用正則表達式中找到/ TextMate的更換比賽了,下面將在文本HTML標記每個屬性相匹配:

/([\w]+)=['"]?([^'\s|"\s|\s]*)['"]?/gi 

我怎樣才能改變這種捕獲並調整每個屬性,不僅是最後一個?已經擺弄了很長一段時間沒有結果。任何幫助表示讚賞!

回答

2
text.replace(/='([^']*)'/g, '="$1"').replace(/=([^"'][^ >]*)/g, '="$1"') 

或(更換):

text.replace(/='([^']*)'|=([^"'][^ >]*)/g, '="$1"') 
+1

首先,謝謝!這樣可行。我唯一的問題是否可以在一個replace()中完成。 HTML文件可能非常大,效率是關鍵。我會盡情玩。 – thechriskelley 2010-11-03 22:00:40

+0

@thechriskelley:在一個「替換」中增加了一個解決方案 – thejh 2010-11-03 22:58:45

+0

非常好,謝謝! – thechriskelley 2010-11-04 21:53:56

1

我知道這是一個遲到的回答,但如果你可以隨時使用sanitize-html它爲節點編寫的,但可以肯定,你可以運行browserify對庫(或者你的代碼)。

請注意,它使用lodash,所以如果您已經在使用它,那麼您可能需要調整包裝。

這個例子比你想要的要多......我使用這個庫來清理輸入代碼,從這裏轉換爲存儲在db中的markdown,我通過marked重新水合。

// convert/html-to-filtered-markdown.js 

'use strict'; 

var sanitize = require('sanitize-html') //https://www.npmjs.org/package/sanitize-html 
    ,toMarkdown = require('to-markdown').toMarkdown 
    ; 

module.exports = function convertHtmlToFilteredMarkdown(input, options) { 
    if (!input) return ''; 

    options = options || {}; 

    //basic cleanup, normalize line endings, normalize/reduce whitespace and extra line endings 
    var response = (input || '').toString().trim() 
    .replace(/(\r\n|\r|\n)/g, '\n') //normalize line endings 
    .replace(/「/g, '"') //remove fancy quotes 
    .replace(/」/g, '"') //remove fancy quotes 
    .replace(/‘/g, '\'') //remove fancy quotes 
    .replace(/’/g, '\'') //remove fancy quotes 
    ; 

    //sanitize html input 
    response = sanitize(response, { 
    //don't allow table elements 
    allowedTags: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol', 'nl', 'li', 'b', 'i', 'strong', 'em', 'strike', 'code', 'hr', 'br', 'div', 'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre' ], 

    //make orderd lists 
    transformTags: { 
     'ol': 'ul' 
    } 
    }).replace(/\r\n|\r|\n/g,'\n') //normalize line endings; 

    if (!options.tables) { 
    response = response.replace(/[\s\n]*\<(\/?)(table|thead|tbody|tr|th|td)\>[\s\n]*/g, '\n\n') //replace divs/tables blocks as paragraphs 
    } 

    //cleanup input further 
    response = response 
    .replace(/[\s\n]*\<(\/?)(div|p)\>[\s\n]*/g, '\n\n') //divs and p's to simple multi-line expressions 
    .replace(/\>#/g, '\n\n#') //cleanup #'s' after closing tag, ex: <a>...</a>\n\n# will be reduced via sanitizer 
    .replace(/\\s+\</,'<') //remove space before a tag open 
    .replace(/\>\s+\n?/,'>\n') //remove space after a tag close 
    .replace(/\&?nbsp\;?/g,' ') //revert nbsp to space 
    .replace(/\<\h[12]/g,'<h3').replace(/\<\/\h[12]/g,'</h3') //reduce h1/h2 to h3 
    ; 

    //convert response to markdown 
    response = toMarkdown(response); 

    //normalize line endings 
    response = response 
    .replace(/(?:^|\n)##?[\b\s]/g,'\n### ') //reduce h1 and h2 to h3 
    .replace(/(\r\n|\r|\n)/g, '\n') //normalize line endings 
    .trim() 

    return response + '\n'; 
}