After getting the rich text, as long as part of the content is displayed, the rich text label needs to be removed, and then part of the content needs to be intercepted; then the filter, which has been used many times in wechat applets, has also been encountered in vue and react
1. Remove html tags from rich text
- Remove html tags and spaces
let richText = ' <p style="font-size: 25px;color: white"> sdaflsjf Rich and hungry</p><span>dsfjlie</span>'; /* Remove html tags from rich text */ /* *,+Qualifiers are greedy because they match as much text as possible, and non greedy or minimal matching can only be achieved by adding a "? After them.*/ let content = richText.replace(/<.+?>/g, ''); console.log(content); /* Remove */ content = content.replace(/ /ig, ''); console.log(content); /* Remove blank space */ content = content.replace(/\s/ig, ''); console.log(content);
- Intercept string
content = formatRichText(content); console.log(content); /* Use substring to intercept strings */ if (content.length > 10) { content = content.substring(0, 10) + '...'; } console.log(content); /* Add ellipsis after limit words */ function formatRichText(richText) { let temporaryText = ''; /* Add ellipsis after setting how long */ const len = 142; if (richText.length * 2 <= len) { return richText; } /* Total length used to record text content */ let strLength = 0; for (let i = 0; i < richText.length; i++) { temporaryText = temporaryText + richText.charAt(i); /* charCodeAt()Returns the Unicode encoding of the character in the specified position. When the value is below 128, one character takes one place, and when the value is above 128, one character takes two places */ if (richText.charCodeAt(i) > 128) { strLength = strLength + 2; if (strLength >= len) { return temporaryText.substring(0, temporaryText.length - 1) + "..."; } } else { strLength = strLength + 1; if (strLength >= len) { return temporaryText.substring(0, temporaryText.length - 2) + "..."; } } } return temporaryText; }
2. Filter used in Vue
filters: { localData(value) { let date = new Date(value * 1000); let Month = date.getMonth() + 1; let Day = date.getDate(); let Y = date.getFullYear() + 'year'; let M = Month < 10 ? '0' + Month + 'month' : Month + 'month'; let D = Day + 1 < 10 ? '0' + Day + 'day' : Day + 'day'; let hours = date.getHours(); let minutes = date.getMinutes(); let hour = hours < 10 ? '0' + hours + ':' : hours + ':'; let minute = minutes < 10 ? '0' + minutes : minutes; return Y + M + D + ' ' + hour + minute; } } /* Use, just add it to the div. the parameter is in front of| and the filter is behind */ <div class="time">{{data.etime | localData}}</div>
3. Use filter in wechat applet
- New. wxs file
var localData = function (value) { var date = getDate(value * 1000); var Month = date.getMonth() + 1; var Day = date.getDate(); var hours = date.getHours(); //Calculate remaining hours var minutes = date.getMinutes(); //Calculate the remaining minutes var Y = date.getFullYear() + '-'; var M = Month < 10 ? '0' + Month + '-' : Month + '-'; var D = Day + 1 < 10 ? '0' + Day + '' : Day + ''; var H = hours < 10 ? '0' + hours + ':' : hours + ':' var m = minutes < 10 ? '0' + minutes : minutes; return Y+M + D + " " + H + m; } module.exports = { localData: localData }
- Use the < WXS / > tag to import. src is the path and module is the name of the imported file module
<wxs src="./filters.wxs" module="tool" /> <text class="scoreText">{{tool.filterScore(item.shop.score)}}branch</text>
- Wrap directly in the. wxml file with < WXS > < / WXS >
<wxs module="foo"> var some_msg = "hello world"; module.exports = { msg : some_msg, } </wxs> <view> {{foo.msg}} </view>
4. Use in react
- Use in react is to define a method
import noBanner from '@/assets/storeDetail/no-banner.jpg' const filterImg = item => { let bgImg; if (item.shopimages == null) { bgImg = noBanner; } else { bgImg = item.shopimages[0]; } return bgImg; }; /* Use */ <img src={filterImg(storeitem)} className={style.topImg} alt="" />
Studying hard. If it helps your study, leave your mark