凯哥的个人网站

文本字符串示例：

let str = '活动规则文案活动规则<b>文案活动</b>规则换行\n文案活动规则文案活动规则文案活动规则换行\n文案活动规则文案<b>重点文案</b>活动规则文案活动规则<b>文案活动</b>规则文案活动规则文案活动规则文案活动规则文案活动规则文案<b>重点文案</b>活动规则文案活动规则<b>文案活动</b>规则文案活动规则文案活动规则文案活动规则文案活动规则文案<b>重点文案</b>活动规则文案活动规则<b>文案活动</b>规则文案活动规则文案活动规则文案活动规则文案活动规则文案<b>重点文案</b>活动规则文案活动规则<b>文案活动</b>规则文案活动规则文案活动规则文案活动规则文案活动规则文案<b>重点文案</b>活动规则文案活动规则<b>文案活动</b>规则文案活动规则文案活动规则文案活动规则文案活动规则文案<b>重点文案</b>活动规则文案活动规则<b>文案活动</b>规则文案活动规则文案活动规则文案活动规则文案活动规则文案<b>重点文案</b>活动规则文案活动规则<b>文案活动</b>规则文案活动规则文案活动规则文案活动规则文案活动规则文案<b>重点文案</b>活动规则文案活动规则<b>文案活动</b>规则文案活动规则文案活动规则文案活动规则文案活动规则文案<b>重点文案</b>活动规则文案活动规则<b>文案活动</b>规则文案活动规则文案活动规则文案活动规则文案活动规则文案<b>重点文案</b>活动规则文案活动规则<b>文案活动</b>规则文案活动规则文案活动规则文案活动规则文案活动规则文案<b>重点文案</b>'

<b></b>包裹的文本加颜色遇到\n换行

handleRuleText (text, color) {
	let textArr = [];
	if(text && text.length) {
		while (text.length) {
			let startIndex = text.indexOf('<b>');
			let endIndex = text.indexOf('</b>');
			let tempText = {};
			// 有颜色
			if (startIndex === 0 ) {
				if(endIndex > -1) {
					tempText = {
						text: text.substring(startIndex + 3, endIndex),
						color
					};
					text = text.substring(endIndex + 4);
				}else{//只有<b>没有结束标签的情况
					tempText = {
						text: text.substring(0),
						color: ''
					}
					text = '';
				}

			} else {
				if (startIndex > -1) {
					tempText = {
						text: text.substring(0, startIndex), // 取文本到<b>截止
						color: ''
					}
					text = text.substring(startIndex);// 剩余文本
				} else {
					tempText = {
						text: text.substring(0),
						color: ''
					}
					text = '';
				}
			}
			if (tempText.text.includes('\\n')) { // 有换行
				let arr = tempText.text.split('\\n');
				arr.forEach((item, index) => {
					textArr.push({
						text: item,
						color: tempText.color,
						newline: index > 0 // 第二个文本才换行
					});
				});
			} else {
				textArr.push(tempText);
			}
		}
	}

	return textArr;
}

wxml渲染

<block wx:for="{{tinyRule.text}}">
	 <view wx:if="{{item.newline}}"></view>
	 <text style="color:{{item.color}}" >{{item.text}}</text>
</block>