L'applet WeChat traite le texte enrichi

Traitement de l'adaptation de la largeur de l'image en texte enrichi

1. Supprimez imgles attributs de style, de largeur et de hauteur dans la balise
2. imgAjoutez des attributs de style à la balise : max-width:100%;height:auto
3. Modifiez l'attribut width dans tous les styles en max-width:100%
4. supprimer <br/>l'étiquette

formatRichTextImg = (html) => {
    
    
	let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
    
    
		match = match.replace(/style="[^"]+"/gi, '').replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '');
		match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
		match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
		return match;
	});
	newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
    
    
		match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
		return match;
	});
	newContent = newContent.replace(/<br[^>]*\/>/gi, '');
	newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"');
	return newContent;
},

Obtenez le vrai contenu en texte enrichi(À l'exclusion des balises, des images, des espaces, des sauts de ligne, puis de la reconversion des symboles spéciaux échappés)

1. Supprimer les balises et les images
2. Supprimer les espaces
3. Reconvertir les symboles spéciaux échappés

formatRichText = (rich) => {
    
    
	// 对应替换的的内容
	const rep = {
    
    
		"‘": "‘",
		"’": "’",
		"“": "“",
		"”": "”",
		"…": "…",
		"·": "·",
		"&": "&",
		"&lt;": "<",
		"&gt;": ">",
	}
	return 
		rich.replace(/<[^>]+>/g, "")
			.replaceAll(/\r|\n|\\s|&nbsp;|&ensp;|&emsp;/ig, "")
			.replaceAll(new RegExp(Object.keys(rep).join('|'),'ig'), function ($0) {
    
    
				return rep[$0];
			})
}

Afficher le texte enrichi

Balise de texte enrichi

<rich-text nodes="{
     
     {richText}}"></rich-text>