JavaScript 截取字符串忽略的长度但是又不能删掉怎么写

JavaScript中截取字符串且忽略特定标签（如 ）的长度但是又不能删掉HTML标签的方法，可以通过多步骤来实施：首先创建一个虚拟的DOM元素，将字符串放入其中、其次遍历该元素的子节点、然后针对文本节点进行截取、最后根据需要保留或去除其他类型的节点。

具体实现涉及DOM操作和字符串处理。首先，使用DOMParser解析字符串并生成一个文档Fragment，这个文档Fragment可以像普通的DOM节点一样被操作。然后，设计一个函数，递归地检查每个节点，如果节点是文本节点，就对其内容进行截断，并且在截断的同时累加文本长度，以维护一个全局的字符计数。如果遇到 标签或其他需要保留的元素，这些元素不计入字符长度，但在最后的输出中需要被保留。

一、创建虚拟DOM元素

首先，需要使用一个DOM解析器来解析包含HTML标记的字符串，这样可以方便地操作HTML结构。

const parser = new DOMParser();
const docFragment = parser.parseFromString(yourString, 'text/html');

接下来，遍历这个虚拟的DOM元素，准备对它的文本内容进行处理。

二、递归遍历子节点

由于需要对DOM结构进行递归遍历，创建一个递归函数来处理。

function traverseNodes(node) {
    // 这里将会实现遍历逻辑
}

三、处理文本节点并保留` `

在遍历过程中，要对文本节点的内容进行截取。但是得保留 标签，因此在遇到 标签时应该跳过计数。

let charCount = 0;
const maxLength = 100; // 设定最大文本长度
function cutoffText(textNode) {
    // 如果已经超过长度，直接返回一个空字符串
    if (charCount >= maxLength) {
        return '';
    }
    // 取要截取的文本长度
    const cutoff = maxLength - charCount;
    const textContent = textNode.textContent;
    const truncatedText = textContent.substr(0, cutoff);
    charCount += truncatedText.length;
    return truncatedText;
}
function traverseNodes(node) {
    // 遍历子节点
    node.childNodes.forEach(child => {
        if (child.nodeType === Node.TEXT_NODE) {
            // 处理文本节点
            child.textContent = cutoffText(child);
        } else if (child.nodeType === Node.ELEMENT_NODE && child.tagName !== 'BR') {
            // 遍历非文本节点，忽略`<br>`
            traverseNodes(child);
        }
        // `<br>`标签不处理，保留原样
    });
}
// 开始处理
traverseNodes(docFragment.body);

四、提取处理后的内容

进行处理后的DOM结构，现在需要将其转换回字符串格式，以便在页面上显示或进一步使用。

const resultString = docFragment.body.innerHTML;

通过以上步骤，你已经完成了提出的任务：截取字符串时忽略 标签的长度但又保留这些HTML标签。这种方法既能保证文本的最大长度限制，又不丢失原有的格式信息。

五、完整的代码示例

接下来是完整的代码融合以上各部分，实现完整的功能：

function cutoffHtmlText(htmlString, maxLength) {
    const parser = new DOMParser();
    const docFragment = parser.parseFromString(htmlString, 'text/html');
    let charCount = 0;
    function cutoffText(textNode) {
        if (charCount >= maxLength) {
            return '';
        }
        const cutoff = maxLength - charCount;
        const textContent = textNode.textContent;
        const truncatedText = textContent.substr(0, cutoff);
        charCount += truncatedText.length;
        return truncatedText;
    }
    function traverseNodes(node) {
        node.childNodes.forEach(child => {
            if (child.nodeType === Node.TEXT_NODE) {
                // 处理文本节点
                child.textContent = cutoffText(child);
            } else if (child.nodeType === Node.ELEMENT_NODE && child.tagName !== 'BR') {
                // 遍历非文本节点，忽略`<br>`
                traverseNodes(child);
            }
            // `<br>`标签不处理，保留原样
        });
    }
    traverseNodes(docFragment.body);
    return docFragment.body.innerHTML;
}
const yourString = 'Here is some text with <br> breaks <br> and more text...';
const maxLength = 100;
// 使用上述函数
const resultString = cutoffHtmlText(yourString, maxLength);
console.log(resultString);