一个包含 html 标签的 js 字符串渲染到页面上，当超过50个字时，自动截取前50个字符，并且截取的逻辑不包含html 标签

在JavaScript中，如果你有一个包含HTML标签的字符串并且想要在页面上呈现，通常需要先解析HTML内容，然后再对其进行处理。对于超过50个字符的情况，通常的做法是截取字符串的前50个字符，并移除其中的HTML标签。这里可以借助正则表达式或者专门的HTML解析库如`DOMParser`。

以下是一个简单的例子，使用正则表达式来去除HTML标签：

function truncateHtml(html, maxLength) {
    let cleanText = html.replace(/<[^>]+>/g, ''); // 去除所有HTML标签
    if (cleanText.length > maxLength) { // 检查是否超过了长度限制
        cleanText = cleanText.substring(0, maxLength) + '...'; // 截取并添加省略号
    }
    return cleanText;
}

const longHtmlString = '<p>This is a very long string with some HTML tags...</p>';
let truncatedString = truncateHtml(longHtmlString, 50);

// 然后你可以将truncatedString插入到DOM中，如：
document.getElementById('myDiv').innerText = truncatedString;

注意这只是一个基本示例，实际处理可能会更复杂，特别是遇到嵌套的标签或有特殊字符的情况下。如果你需要更精确、兼容性和效率更高的解决方案，推荐使用成熟的HTML解析库如`cheerio`或`jsdom`。