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

<img src="https://cdn-kb.worktile.com/kb/wp-content/uploads/2024/04/27040211/add2bc64-4d2f-4e4d-8bea-216e694c1b22.webp" alt="JavaScript 截取字符串忽略
的长度但是又不能删掉怎么写” />

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

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

一、创建虚拟DOM元素

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

const parser = new DOMParser();

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

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

二、递归遍历子节点

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

function traverseNodes(node) {

    // 这里将会实现遍历逻辑
}

三、处理文本节点并保留<BR>

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

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;

通过以上步骤，你已经完成了提出的任务：截取字符串时忽略<br>标签的长度但又保留这些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);

使用上面提供的函数cutoffHtmlText(htmlString, maxLength)，可以在保留<br>标签的同时，按照预定的长度截取HTML字符串中的文本。这是一种较为复杂但能准确实现需求的方法，适用于需要严格控制文本长度，同时保留格式的场景。

相关问答FAQs：

Q：如何在 JavaScript 中截取字符串时忽略<br>标签的长度但又不能删除它？

A：当需要截取字符串时，可以使用正则表达式和replace方法来忽略<br>标签的长度。具体操作如下：

1. 使用正则表达式找到<br>标签并将其替换成一个特殊的占位符，例如"BR_TAG"。
2. 接着截取字符串，忽略了<br>标签的长度，直到达到所需的截取长度。
3. 最后，将字符串中的占位符"BR_TAG"替换回<br>标签即可。

示例代码如下：

const string = "这是一段包含<br>标签的字符串。";
const placeholder = "BR_TAG";
const lengthToKeep = 10;

const modifiedString = string.replace(/<br>/g, placeholder);

const truncatedString = modifiedString.substring(0, lengthToKeep);

const finalString = truncatedString.replace(new RegExp(placeholder, 'g'), "<br>");

console.log(finalString); // 输出：这是一段包含<br>标签的字

这样可以忽略<br>标签的长度，保留所需的字符串长度，同时又不会删除<br>标签。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除。