Merge pull request #320 from tangly1024/fix-word-count-inaccurate

字数统计相关
This commit is contained in:
tangly1024
2022-06-20 13:43:14 +08:00
committed by GitHub
2 changed files with 16 additions and 13 deletions

View File

@@ -10,11 +10,11 @@ const Code = dynamic(() =>
import('react-notion-x/build/third-party/code').then((m) => m.Code), { ssr: true } import('react-notion-x/build/third-party/code').then((m) => m.Code), { ssr: true }
) )
const Collection = dynamic(() => const Collection = dynamic(() =>
import('react-notion-x/build/third-party/collection').then((m) => m.Collection), { ssr: false } import('react-notion-x/build/third-party/collection').then((m) => m.Collection), { ssr: true }
) )
const Equation = dynamic(() => const Equation = dynamic(() =>
import('react-notion-x/build/third-party/equation').then((m) => m.Equation), { ssr: false } import('react-notion-x/build/third-party/equation').then((m) => m.Equation), { ssr: true }
) )
const Pdf = dynamic( const Pdf = dynamic(

View File

@@ -7,7 +7,7 @@ import { useEffect } from 'react'
export default function WordCount() { export default function WordCount() {
useEffect(() => { useEffect(() => {
countWords() countWords()
}, []) })
return <div id='wordCountWrapper' className='hidden'> return <div id='wordCountWrapper' className='hidden'>
<i className='mr-1 fas fa-file-word' /> 本文字数 <strong id='wordCount'>0</strong> &nbsp;|&nbsp; <i className='mr-1 fas fa-clock' /> 阅读时长 <strong id='readTime'>0</strong> <i className='mr-1 fas fa-file-word' /> 本文字数 <strong id='wordCount'>0</strong> &nbsp;|&nbsp; <i className='mr-1 fas fa-clock' /> 阅读时长 <strong id='readTime'>0</strong>
@@ -18,26 +18,29 @@ export default function WordCount() {
* 更新字数统计和阅读时间 * 更新字数统计和阅读时间
*/ */
function countWords() { function countWords() {
const articleElement = document.getElementById('notion-article') const articleText = deleteHtmlTag(document.getElementById('notion-article')?.innerHTML)
if (articleElement) { const wordCount = fnGetCpmisWords(articleText)
const articleText = deleteHtmlTag(articleElement.innerHTML) // 阅读速度 300-500每分钟
const wordCount = fnGetCpmisWords(articleText) document.getElementById('wordCount').innerHTML = wordCount
// 阅读速度 300-500每分钟 document.getElementById('readTime').innerHTML = Math.floor(wordCount / 400) + 1
document.getElementById('wordCount').innerHTML = wordCount const wordCountWrapper = document.getElementById('wordCountWrapper')
document.getElementById('readTime').innerHTML = Math.floor(wordCount / 400) + 1 wordCountWrapper.classList.remove('hidden')
const wordCountWrapper = document.getElementById('wordCountWrapper')
wordCountWrapper.classList.remove('hidden')
}
} }
// 去除html标签 // 去除html标签
function deleteHtmlTag(str) { function deleteHtmlTag(str) {
if (!str) {
return ''
}
str = str.replace(/<[^>]+>|&[^>]+;/g, '').trim()// 去掉所有的html标签和&nbsp;之类的特殊符合 str = str.replace(/<[^>]+>|&[^>]+;/g, '').trim()// 去掉所有的html标签和&nbsp;之类的特殊符合
return str return str
} }
// 用word方式计算正文字数 // 用word方式计算正文字数
function fnGetCpmisWords(str) { function fnGetCpmisWords(str) {
if (!str) {
return 0
}
let sLen = 0 let sLen = 0
try { try {
// eslint-disable-next-line no-irregular-whitespace // eslint-disable-next-line no-irregular-whitespace