富文本转义字符大全

在开发uniapp和微信小程序的时候,难免会遇到富文本渲染的问题,当然,简单的富文本我们使用v-html或是rich-text就可以解析,当富文本中含有多张图片需要点击放大或是某个文本需要点击的时候就不行了,这时我们可以使用uView官方提供的u-parse组件,一下问题就出现了。

u-parse组件有些特殊字符是解析不了的,需要先转义才能解析,当时我在上网找了半天,发现都是只有一部分的特殊字符转义,由于项目原因,特殊字符是不确定的,所以自己封装了一个(200多个特殊字符的转义)

1.在文件根目录下新建request文件夹

2.在文件夹中创建escape.js文件

escape.js文件内容如下

module.exports = {
	// 转义字符(全端支持)
	escapeHtml(str) {
		var arrEntities = {
			'nbsp': ' ',
			'iexcl': '¡',
			'cent': '¢',
			'pound': '£',
			'curren': '¤',
			'yen': '¥',
			'brvbar': '¦',
			'sect': '§',
			'uml': '¨',
			'copy': '©',
			'ordf': 'ª',
			'laquo': '«',
			'not': '¬',
			'shy': '',
			'reg': '®',
			'macr': '¯',
			'deg': '°',
			'plusmn': '±',
			'sup2': '²',
			'sup3': '³',
			'acute': '´',
			'micro': 'µ',
			'para': '¶',
			'middot': '·',
			'cedil': '¸',
			'sup1': '¹',
			'ordm': 'º',
			'raquo': '»',
			'frac14': '¼',
			'frac12': '½',
			'frac34': '¾',
			'iquest': '¿',
			'Agrave': 'À',
			'Aacute': 'Á',
			'Acirc': 'Â',
			'Atilde': 'Ã',
			'Auml': 'Ä',
			'Aring': 'Å',
			'AElig': 'Æ',
			'Ccedil': 'Ç',
			'Egrave': 'È',
			'Eacute': 'É',
			'Ecirc': 'Ê',
			'Euml': 'Ë',
			'Igrave': 'Ì',
			'Iacute': 'Í',
			'Icirc': 'Î',
			'Iuml': 'Ï',
			'ETH': 'Ð',
			'Ntilde': 'Ñ',
			'Ograve': 'Ò',
			'Oacute': 'Ó',
			'Ocirc': 'Ô',
			'Otilde': 'Õ',
			'Ouml': 'Ö',
			'times': '×',
			'Oslash': 'Ø',
			'Ugrave': 'Ù',
			'Uacute': 'Ú',
			'Ucirc': 'Û',
			'Uuml': 'Ü',
			'Yacute': 'Ý',
			'THORN': 'Þ',
			'szlig': 'ß',
			'agrave': 'à',
			'aacute': 'á',
			'acirc': 'â',
			'atilde': 'ã',
			'auml': 'ä',
			'aring': 'å',
			'aelig': 'æ',
			'ccedil': 'ç',
			'egrave': 'è',
			'eacute': 'é',
			'ecirc': 'ê',
			'euml': 'ë',
			'igrave': 'ì',
			'iacute': 'í',
			'icirc': 'î',
			'iuml': 'ï',
			'eth': 'ð',
			'ntilde': 'ñ',
			'ograve': 'ò',
			'oacute': 'ó',
			'ocirc': 'ô',
			'otilde': 'õ',
			'ouml': 'ö',
			'divide': '÷',
			'oslash': 'ø',
			'ugrave': 'ù',
			'uacute': 'ú',
			'ucirc': 'û',
			'uuml': 'ü',
			'yacute': 'ý',
			'thorn': 'þ',
			'yuml': 'ÿ',
			'fnof': 'ƒ',
			'Alpha': 'Α',
			'Beta': 'Β',
			'Gamma': 'Γ',
			'Delta': 'Δ',
			'Epsilon': 'Ε',
			'Zeta': 'Ζ',
			'Eta': 'Η',
			'Theta': 'Θ',
			'Iota': 'Ι',
			'Kappa': 'Κ',
			'Lambda': 'Λ',
			'Mu': 'Μ',
			'Nu': 'Ν',
			'Xi': 'Ξ',	
			'Omicron': 'Ο',
			'Pi': 'Π',
			'Rho': 'Ρ',
			'Sigma': 'Σ',
			'Tau': 'Τ',
			'Upsilon': 'Υ',
			'Phi': 'Φ',
			'Chi': 'Χ',
			'Psi': 'Ψ',
			'Omega': 'Ω',
			'alpha': 'α',
			'beta': 'β',
			'gamma': 'γ',
			'delta': 'δ',
			'epsilon': 'ε',
			'zeta': 'ζ',
			'eta': 'η',
			'theta': 'θ',
			'iota': 'ι',
			'kappa': 'κ',
			'lambda': 'λ',
			'mu': 'μ',
			'nu': 'ν',
			'xi': 'ξ',
			'omicron': 'ο',
			'pi': 'π',
			'rho': 'ρ',
			'sigmaf': 'ς',
			'sigma': 'σ',
			'tau': 'τ',
			'upsilon': 'υ',
			'phi': 'φ',
			'chi': 'χ',
			'psi': 'ψ',
			'omega': 'ω',
			'thetasym': '?',
			'upsih': '?',
			'piv': '?',
			'bull': '•',
			'hellip': '…',
			'prime': '′',
			'Prime': '″',
			'oline': '‾',
			'frasl': '⁄',
			'weierp': '℘',
			'image': 'ℑ',
			'real': 'ℜ',
			'trade': '™',
			'alefsym': 'ℵ',
			'larr': '←',
			'uarr': '↑',
			'rarr': '→',
			'darr': '↓',
			'harr': '↔',
			'crarr': '↵',
			'lArr': '⇐',
			'uArr': '⇑',
			'rArr': '⇒',
			'dArr': '⇓',
			'hArr': '⇔',
			'forall': '∀',
			'part': '∂',
			'exist': '∃',
			'empty': '∅',
			'nabla': '∇',
			'isin': '∈',
			'notin': '∉',
			'ni': '∋',
			'prod': '∏',
			'sum': '∑',
			'minus': '−',
			'lowast': '∗',
			'radic': '√',
			'prop': '∝',
			'infin': '∞',
			'ang': '∠',
			'and': '∧',
			'or': '∨',
			'cap': '∩',
			'cup': '∪',
			'int': '∫',
			'there4': '∴',
			'sim': '∼',
			'cong': '∝',
			'asymp': '≈',
			'ne': '≠',
			'equiv': '≡',
			'le': '≤',
			'ge': '≥',
			'sub': '⊂',
			'sup': '⊃',
			'nsub': '⊄',
			'sube': '⊆',
			'supe': '⊇',
			'oplus': '⊕',
			'otimes': '⊗',
			'perp': '⊥',
			'sdot': '⋅',
			'lceil': '?',
			'rceil': '?',
			'lfloor': '?',
			'rfloor': '?',
			'lang': '?',
			'rang': '?',
			'loz': '◊',
			'spades': '♠',
			'clubs': '♣',
			'hearts': '♥',
			'diams': '♦',
			'quot': '"',
			'amp': '',
			'lt': '<',
			'gt': '>',
			'OElig': 'Œ',
			'oelig': 'œ',
			'Scaron': 'Š',
			'scaron': 'š',
			'Yuml': 'Ÿ',
			'circ': 'ˆ',
			'tilde': '˜',
			'ensp': '',
			'emsp': '',
			'thinsp': '',
			'zwnj': '',
			'zwj': '‍',
			'‎lrm': '',
			'rlm': '',
			'ndash': '–',
			'mdash': '—',
			'lsquo': '‘',
			'rsquo': '’',
			'sbquo': '‚',
			'ldquo': '“',
			'rdquo': '”',
			'bdquo': '„',
			'dagger': '†',
			'Dagger': '‡',
			'permil': '‰',
			'lsaquo': '‹',
			'rsaquo': '›',
			'euro': '€'
		};
		return str.replace(
			/&(nbsp|iexcl|cent|pound|curren|yen|brvbar|sect|uml|copy|ordf|laquo|not|shy|reg|macr|deg|plusmn|sup2|sup3|acute|micro|para|middot|cedil|sup1|ordm|raquo|frac14|frac12|frac34|iquest|Agrave|Aacute|Acirc|Atilde|Auml|Aring|AElig|Ccedil|Egrave|Eacute|Ecirc|Euml|Igrave|Iacute|Icirc|Iuml|ETH|Ntilde|Ograve|Oacute|Ocirc|Otilde|Ouml|times|Oslash|Ugrave|Uacute|Ucirc|Uuml|Yacute|THORN|szlig|agrave|aacute|acirc|atilde|auml|aring|aelig|ccedil|egrave|eacute|ecirc|euml|igrave|iacute|icirc|iuml|eth|ntilde|ograve|oacute|ocirc|otilde|ouml|divde|oslash|ugrave|uacute|ucirc|uuml|yacute|thorn|yuml|fnof|Alpha|Beta|Gamma|Delta|Epsilon|Zeta|Eta|Theta|Iota|Kappa|Lambda|Mu|Nu|Xi|	Omicron|Pi|Rho|Sigma|Tau|Upsilon|Phi|Chi|Psi|Omega|alpha|beta|gamma|delta|epsilon|zeta|eta|theta|iota|kappa|mu|xi|omicron|pi|rho|sigmaf|sigma|tau|upsilon|phi|chi|psi|omega|thetasym|upsih|piv|bull|hellip|prime|Prime|frasl|image|real|trade|alefsym|larr|uarr|rarr|darr|harr|crarr|uArr|rArr|dArr|hArr|forall|part|exist|empty|nabla|isin|notin|ni|prod|sum|minus|lowast|radic|prop|infin|ang|and|or|cap|cup|int|there4|sim|cong|asymp|ne|equiv|le|ge|sub|sup|nsub|sube|supe|oplus|otimes|perp|sdot|lceil|rceil|lfloor|rfloor|lang|rang|loz|spades|clubs|hearts|diams|quot|amp|lt|gt|OElig|oelig|Scaron|scaron|Yuml|circ|tilde|ensp|emsp|thinsp|zwnj|zwj|lrm|rlm|ndash|mdash|lsquo|rsquo|sbquo|ldquo|rdquo|bdquo|dagge|Dagger|permil|lsaquo|rsaquo|euro);/ig,
			function(all, t) {
				return arrEntities[t];
		});
	},
	
	// js转义字符(app端不支持)
	decodeHtml(html) {
		let txt = document.createElement('textarea');
		txt.innerHTML = html;
		return txt.value;
	},
}

 3.在main.js中引入,并加入到vue原型中

 4.最后在页面中使用

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值