传入一个字符串或标签返回其所占的长度

思路说明

使用隐藏的div元素来插入传入的HTML或纯字符串，并测量其宽度。
使用style="white-space: nowrap;"来确保字符串不换行。
使用隐藏的div元素的offsetWidth来取得宽度。取得之后，要记得移除插入的元素。
此外，该方法可能受到浏览器渲染引擎和字体渲染的影响，实际宽度可能略有差异。

代码说明

function getStringWidth(input, fontSize = '12px') {// 创建一个隐藏的 div 元素const hiddenDiv = document.createElement('div');hiddenDiv.style.visibility = 'hidden';hiddenDiv.style.position = 'absolute';hiddenDiv.style.whiteSpace = 'nowrap';// 如果传入的是 HTML，则将其作为 innerHTML 插入 divif (/<[^>]+>/g.test(input)) {hiddenDiv.innerHTML = input;} else {// 如果传入的是纯字符串，则直接插入 divhiddenDiv.textContent = input;}// 设置字号hiddenDiv.style.fontSize = fontSize;// 将 div 插入到文档中document.body.appendChild(hiddenDiv);// 获取 div 的宽度const width = hiddenDiv.offsetWidth;// 从文档中移除 divdocument.body.removeChild(hiddenDiv);return width;
}// 不同的html中的font-size不同得到的值也不同。
const theString01 = `getStringWidth('<p>Hello, Worl55555<div style="font-size:44px;">8一个</div>d!</p>')`;
const theString02 = `getStringWidth('<p>Hello, Worl55555<div style="font-size:24px;">8一个</div>d!</p>')`;
console.log(theString01, eval(theString01));//谷歌浏览器114;火狐:112;
console.log(theString02, eval(theString02));//谷歌浏览器99;火狐:89;// 半角与全角的字符串不同，长度也不同。
const theString03 = `getStringWidth('h方！!')`;
const theString04 = `getStringWidth('he！!')`;
console.log(theString03, eval(theString03));//谷歌浏览器35;火狐:34;
console.log(theString04, eval(theString04));//谷歌浏览器30;火狐:29;