javascript正則表達式替換在標簽中自行找到的表達式
[英]javascript regex replace expressions found with themselves within tags
問題描述
我有一個表單，用戶可以在其中輸入一些代碼，然后我想使用Javascript將其顯示回網頁中。 我已經在javascript中使用了正則表達式，用html關鍵字＆lt和＆gt替換了所有<>標簽，但是我想用藍色突出顯示正在打開的標簽的所有實例，然后以空格或關閉標簽結束。 我可以找到所需的表達式，但隨后要用<span>標記將它們包圍起來。
實際的代碼很長，但是這里有一些示例代碼涵蓋了我想做的事情：
//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,'<');
//now the expression to get what i want to highlight blue
var regExp = /\<[a-zA-Z]+(\s|>)/g;
現在，我想查找這些表達式，並將它們全部替換成包裹在span標簽中的自身，例如：
text = text.replace(regExp,"<span class='bluefont'>EACH EXPRESSION FOUND</span>");
我不知道如何執行此操作，或者即使僅使用replace也不可能，但是如果這樣做，它將非常方便。
我知道有用於語法高亮顯示的外部庫，但我不想為此使用任何外部庫。 我使用[a-zA-Z]而不是檢查html中的合法標簽名稱，因為我也希望它也適用於xml / xhtml。
2 個解決方案
解決方案1
0
有一個簡單的解決方案-將所有<和>替換為實體，然后使用regexp (\\<[a-zA-Z]*\\>) 。 但確切地說，我將使用其他東西進行首次替換，如下所示。
markedString = htmlentities('My cat is <span>fluffy</span>')
markedString = markedString.replace(new RegExp('(\<[a-zA-Z]*\>)', '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["'"] = ''';
}
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'] = '&';
if (useTable === 'HTML_ENTITIES') {
entities['160'] = ' ';
entities['161'] = '¡';
entities['162'] = '¢';
entities['163'] = '£';
entities['164'] = '¤';
entities['165'] = '¥';
entities['166'] = '¦';
entities['167'] = '§';
entities['168'] = '¨';
entities['169'] = '©';
entities['170'] = 'ª';
entities['171'] = '«';
entities['172'] = '¬';
entities['173'] = '­';
entities['174'] = '®';
entities['175'] = '¯';
entities['176'] = '°';
entities['177'] = '±';
entities['178'] = '²';
entities['179'] = '³';
entities['180'] = '´';
entities['181'] = 'µ';
entities['182'] = '¶';
entities['183'] = '·';
entities['184'] = '¸';
entities['185'] = '¹';
entities['186'] = 'º';
entities['187'] = '»';
entities['188'] = '¼';
entities['189'] = '½';
entities['190'] = '¾';
entities['191'] = '¿';
entities['192'] = 'À';
entities['193'] = 'Á';
entities['194'] = 'Â';
entities['195'] = 'Ã';
entities['196'] = 'Ä';
entities['197'] = 'Å';
entities['198'] = 'Æ';
entities['199'] = 'Ç';
entities['200'] = 'È';
entities['201'] = 'É';
entities['202'] = 'Ê';
entities['203'] = 'Ë';
entities['204'] = 'Ì';
entities['205'] = 'Í';
entities['206'] = 'Î';
entities['207'] = 'Ï';
entities['208'] = 'Ð';
entities['209'] = 'Ñ';
entities['210'] = 'Ò';
entities['211'] = 'Ó';
entities['212'] = 'Ô';
entities['213'] = 'Õ';
entities['214'] = 'Ö';
entities['215'] = '×';
entities['216'] = 'Ø';
entities['217'] = 'Ù';
entities['218'] = 'Ú';
entities['219'] = 'Û';
entities['220'] = 'Ü';
entities['221'] = 'Ý';
entities['222'] = 'Þ';
entities['223'] = 'ß';
entities['224'] = 'à';
entities['225'] = 'á';
entities['226'] = 'â';
entities['227'] = 'ã';
entities['228'] = 'ä';
entities['229'] = 'å';
entities['230'] = 'æ';
entities['231'] = 'ç';
entities['232'] = 'è';
entities['233'] = 'é';
entities['234'] = 'ê';
entities['235'] = 'ë';
entities['236'] = 'ì';
entities['237'] = 'í';
entities['238'] = 'î';
entities['239'] = 'ï';
entities['240'] = 'ð';
entities['241'] = 'ñ';
entities['242'] = 'ò';
entities['243'] = 'ó';
entities['244'] = 'ô';
entities['245'] = 'õ';
entities['246'] = 'ö';
entities['247'] = '÷';
entities['248'] = 'ø';
entities['249'] = 'ù';
entities['250'] = 'ú';
entities['251'] = 'û';
entities['252'] = 'ü';
entities['253'] = 'ý';
entities['254'] = 'þ';
entities['255'] = 'ÿ';
}
if (useQuoteStyle !== 'ENT_NOQUOTES') {
entities['34'] = '"';
}
if (useQuoteStyle === 'ENT_QUOTES') {
entities['39'] = ''';
}
entities['60'] = '<';
entities['62'] = '>';
// ascii decimals to real symbols
for (decimal in entities) {
if (entities.hasOwnProperty(decimal)) {
hash_map[String.fromCharCode(decimal)] = entities[decimal];
}
}
return hash_map;
}
來自http://phpjs.org/functions/htmlentities/的功能htmlentites
來自http://phpjs.org/functions/get_html_translation_table/的函數get_html_translation_table
解決方案2
0 2013-07-30 23:31:41
我不是正則表達式專家，但是我相信您可以在正則表達式中使用反向引用來做到這一點。
var regExp = /(\<[a-zA-Z]+(\s|>))/g; //Note the additional parentheses
text = text.replace(regExp,"<span class='bluefont'>$1</span>");
正則表達式（正則表達式），替換javascript中的第二次出現
[英]Regex (regular expressions), replace the second occurence in javascript
Javascript，搜索多個單詞並自行替換。 如果找到，請僅在文本中替換其中之一
[英]Javascript, search multiple words and replace by themselves. Replace only 1 of them in text if found
如何用標簽包裝一組單詞，JavaScript替換正則表達式
[英]How to wrap a group of words with tags, JavaScript Replace Regular Expressions
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.