如何通过提交按钮筛选指定ID的blockquote并统计数量（JavaScript）

需求说明 #

页面初始展示所有<blockquote>元素，点击提交按钮后需完成以下操作：

• 隐藏所有ID以ranya开头的<blockquote>，仅保留ID以sert开头的内容显示
• 统计符合条件（ID以sert开头）的<blockquote>数量，并将内容和统计结果输出到一个<textarea>中

实现步骤 #

• 在HTML中添加触发操作的提交按钮
• 编写JavaScript为按钮绑定点击事件，在回调中完成元素筛选、隐藏、统计及结果展示
• 遍历所有<blockquote>元素，通过startsWith()方法判断ID前缀：隐藏不符合条件的元素，收集符合条件的内容并计数，最后动态创建（或复用）<textarea>展示结果

完整代码示例 #

HTML 结构

<button id="submitBtn">显示目标引用</button>

<blockquote id="sert-1" contenteditable="true">this is a quote for comment&#128526;</blockquote>
<blockquote id="sert-2" contenteditable="true">this is a quote for comment text1</blockquote>
<blockquote id="ranya-1" contenteditable="true">this is a quote for comment text2</blockquote>
<blockquote id="ranya-2" contenteditable="true">this is a quote for comment text3</blockquote>

JavaScript 逻辑

document.getElementById('submitBtn').addEventListener('click', function() {
    const BLOCKQUOTES = document.querySelectorAll('blockquote');
    let text = '';
    let count = 0;

    BLOCKQUOTES.forEach(blockquote => {
        // 隐藏ID以ranya开头的blockquote
        if (blockquote.id.startsWith("ranya")) {
            blockquote.style.display = 'none';
        }
        // 收集ID以sert开头的内容并统计数量
        if (blockquote.id.startsWith("sert")) {
            text += `${blockquote.textContent} \n`;
            count++;
        }
    });
    text += `符合条件的blockquote数量：${count}`;

    // 避免重复创建textarea，优先复用已有结果框
    let resultTextarea = document.querySelector('textarea[data-quote-result]');
    if (resultTextarea) {
        resultTextarea.value = text;
        return;
    }

    // 动态创建结果展示textarea
    let textarea = document.createElement('textarea');
    textarea.setAttribute('data-quote-result', 'true');
    textarea.value = text;
    document.body.appendChild(textarea);
});

CSS 样式

textarea[data-quote-result] {
  border: 2px solid red;
  width: 80vw;
  height: 60vh;
}

内容的提问来源于stack exchange，提问作者user22886467