JavaScript的正則表達式替換標籤

我有一個表格，用戶可以在一些代碼輸入，然後我想使用Javascript功能來顯示它回到他們在網頁中與自己找到的表達式。我已經使用正則表達式在javascript全部更換爲<>與HTML關鍵字& LT和& GT標籤，但我想正在打開標籤的所有實例，然後用空格或關閉標籤結束以藍色突出。我可以找到我想要的表情，但是我想用「< span>」標籤來包圍它們中的每一個。JavaScript的正則表達式替換標籤

實際的代碼很長，但這裏的一些示例代碼，涵蓋了我想做的事：

//example of what a user might put in 
    var text = "<div id='main'>Here is some <b>bold</b> text.</div>"; 
    //Replace all tag symbols with html keywords 
    text = text.replace(/\r?</g,'&lt'); 
    //now the expression to get what i want to highlight blue 
    var regExp = /\&lt[a-zA-Z]+(\s|&gt)/g;

，現在我想找到的表達，並與自己包裹span標籤內全部更換，像：

text = text.replace(regExp,"<span class='bluefont'>EACH EXPRESSION FOUND</span>");

我不知道該怎麼做，或者如果它甚至有可能只是使用replace，但如果它真的很方便。

我知道有語法高亮外部庫，但我不希望使用任何外部庫這一點。我正在使用[a-zA-Z]而不是在html中檢查合法的標籤名稱，因爲我希望這也適用於xml/xhtml。

來源

2013-07-30 S J

有一個簡單的解決方案 - 更換所有<和>與entites的，下次使用正則表達式(\<[a-zA-Z]*\>)。但確切地說，我會使用其他的替代品，如下所示。

markedString = htmlentities('My cat is <span>fluffy</span>') 
markedString = markedString.replace(new RegExp('(\&lt;[a-zA-Z]*\&gt;)', 'g'), '<span class="marked">$1</span>'); 


function htmlentities (string, quote_style, charset, double_encode) {  
    var hash_map = this.get_html_translation_table('HTML_ENTITIES', quote_style), 
    symbol = ''; 
    string = string == null ? '' : string + '';  
    if (!hash_map) { 
    return false; 
    } 

    if (quote_style && quote_style === 'ENT_QUOTES') { 
    hash_map["'"] = '&#039;'; 
    } 

    if (!!double_encode || double_encode == null) { 
    for (symbol in hash_map) { 
     if (hash_map.hasOwnProperty(symbol)) { 
     string = string.split(symbol).join(hash_map[symbol]); 
     } 
    } 
    } else { 
    string = string.replace(/([\s\S]*?)(&(?:#\d+|#x[\da-f]+|[a-zA-Z][\da-z]*);|$)/g, function (ignore, text, entity) { 
     for (symbol in hash_map) { 
     if (hash_map.hasOwnProperty(symbol)) { 
      text = text.split(symbol).join(hash_map[symbol]); 
     } 
     } 

     return text + entity; 
    }); 
    } 

    return string; 
} 
function get_html_translation_table (table, quote_style) { 
    var entities = {}, 
    hash_map = {}, 
    decimal; 
    var constMappingTable = {}, 
    constMappingQuoteStyle = {}; 
    var useTable = {}, 
    useQuoteStyle = {}; 

    // Translate arguments 
    constMappingTable[0] = 'HTML_SPECIALCHARS'; 
    constMappingTable[1] = 'HTML_ENTITIES'; 
    constMappingQuoteStyle[0] = 'ENT_NOQUOTES'; 
    constMappingQuoteStyle[2] = 'ENT_COMPAT'; 
    constMappingQuoteStyle[3] = 'ENT_QUOTES'; 

    useTable = !isNaN(table) ? constMappingTable[table] : table ? table.toUpperCase() : 'HTML_SPECIALCHARS'; 
    useQuoteStyle = !isNaN(quote_style) ? constMappingQuoteStyle[quote_style] : quote_style ? quote_style.toUpperCase() : 'ENT_COMPAT'; 

    if (useTable !== 'HTML_SPECIALCHARS' && useTable !== 'HTML_ENTITIES') { 
    throw new Error("Table: " + useTable + ' not supported'); 
    // return false; 
    } 

    entities['38'] = '&amp;'; 
    if (useTable === 'HTML_ENTITIES') { 
    entities['160'] = '&nbsp;'; 
    entities['161'] = '&iexcl;'; 
    entities['162'] = '&cent;'; 
    entities['163'] = '&pound;'; 
    entities['164'] = '&curren;'; 
    entities['165'] = '&yen;'; 
    entities['166'] = '&brvbar;'; 
    entities['167'] = '&sect;'; 
    entities['168'] = '&uml;'; 
    entities['169'] = '&copy;'; 
    entities['170'] = '&ordf;'; 
    entities['171'] = '&laquo;'; 
    entities['172'] = '&not;'; 
    entities['173'] = '&shy;'; 
    entities['174'] = '&reg;'; 
    entities['175'] = '&macr;'; 
    entities['176'] = '&deg;'; 
    entities['177'] = '&plusmn;'; 
    entities['178'] = '&sup2;'; 
    entities['179'] = '&sup3;'; 
    entities['180'] = '&acute;'; 
    entities['181'] = '&micro;'; 
    entities['182'] = '&para;'; 
    entities['183'] = '&middot;'; 
    entities['184'] = '&cedil;'; 
    entities['185'] = '&sup1;'; 
    entities['186'] = '&ordm;'; 
    entities['187'] = '&raquo;'; 
    entities['188'] = '&frac14;'; 
    entities['189'] = '&frac12;'; 
    entities['190'] = '&frac34;'; 
    entities['191'] = '&iquest;'; 
    entities['192'] = '&Agrave;'; 
    entities['193'] = '&Aacute;'; 
    entities['194'] = '&Acirc;'; 
    entities['195'] = '&Atilde;'; 
    entities['196'] = '&Auml;'; 
    entities['197'] = '&Aring;'; 
    entities['198'] = '&AElig;'; 
    entities['199'] = '&Ccedil;'; 
    entities['200'] = '&Egrave;'; 
    entities['201'] = '&Eacute;'; 
    entities['202'] = '&Ecirc;'; 
    entities['203'] = '&Euml;'; 
    entities['204'] = '&Igrave;'; 
    entities['205'] = '&Iacute;'; 
    entities['206'] = '&Icirc;'; 
    entities['207'] = '&Iuml;'; 
    entities['208'] = '&ETH;'; 
    entities['209'] = '&Ntilde;'; 
    entities['210'] = '&Ograve;'; 
    entities['211'] = '&Oacute;'; 
    entities['212'] = '&Ocirc;'; 
    entities['213'] = '&Otilde;'; 
    entities['214'] = '&Ouml;'; 
    entities['215'] = '&times;'; 
    entities['216'] = '&Oslash;'; 
    entities['217'] = '&Ugrave;'; 
    entities['218'] = '&Uacute;'; 
    entities['219'] = '&Ucirc;'; 
    entities['220'] = '&Uuml;'; 
    entities['221'] = '&Yacute;'; 
    entities['222'] = '&THORN;'; 
    entities['223'] = '&szlig;'; 
    entities['224'] = '&agrave;'; 
    entities['225'] = '&aacute;'; 
    entities['226'] = '&acirc;'; 
    entities['227'] = '&atilde;'; 
    entities['228'] = '&auml;'; 
    entities['229'] = '&aring;'; 
    entities['230'] = '&aelig;'; 
    entities['231'] = '&ccedil;'; 
    entities['232'] = '&egrave;'; 
    entities['233'] = '&eacute;'; 
    entities['234'] = '&ecirc;'; 
    entities['235'] = '&euml;'; 
    entities['236'] = '&igrave;'; 
    entities['237'] = '&iacute;'; 
    entities['238'] = '&icirc;'; 
    entities['239'] = '&iuml;'; 
    entities['240'] = '&eth;'; 
    entities['241'] = '&ntilde;'; 
    entities['242'] = '&ograve;'; 
    entities['243'] = '&oacute;'; 
    entities['244'] = '&ocirc;'; 
    entities['245'] = '&otilde;'; 
    entities['246'] = '&ouml;'; 
    entities['247'] = '&divide;'; 
    entities['248'] = '&oslash;'; 
    entities['249'] = '&ugrave;'; 
    entities['250'] = '&uacute;'; 
    entities['251'] = '&ucirc;'; 
    entities['252'] = '&uuml;'; 
    entities['253'] = '&yacute;'; 
    entities['254'] = '&thorn;'; 
    entities['255'] = '&yuml;'; 
    } 

    if (useQuoteStyle !== 'ENT_NOQUOTES') { 
    entities['34'] = '&quot;'; 
    } 
    if (useQuoteStyle === 'ENT_QUOTES') { 
    entities['39'] = '&#39;'; 
    } 
    entities['60'] = '&lt;'; 
    entities['62'] = '&gt;'; 


    // ascii decimals to real symbols 
    for (decimal in entities) { 
    if (entities.hasOwnProperty(decimal)) { 
     hash_map[String.fromCharCode(decimal)] = entities[decimal]; 
    } 
    } 

    return hash_map; 
}

功能htmlentites從http://phpjs.org/functions/htmlentities/

功能get_html_translation_table從http://phpjs.org/functions/get_html_translation_table/

來源

2013-07-30 23:23:05 kwarunek

我不是正則表達式的專家，但我相信你可以在你的正則表達式中使用反向引用做到這一點。

var regExp = /(\&lt[a-zA-Z]+(\s|&gt))/g; //Note the additional parentheses 
text = text.replace(regExp,"<span class='bluefont'>$1</span>");

來源

2013-07-30 23:31:41 Kai

JavaScript的正則表達式替換標籤

回答

相關問題