Xpath：提取标签之间的文本，但一旦出现嵌入标签就停止

Question

我想提取以下 HTML 中的文本。但是，在封闭的 HTML 标记中发生的所有内容及其后面的所有内容都应被忽略。

HTML 以不同的形式出现。

<span class="classA">Text 1 <span class="classB">Text 2</span> Text 3 <span class="classC">Text 4</span> Text 5</span>

期望的结果：“文本 1 文本 2 文本 3”

其他变体：

<span class="classA">Text 1 <span class="classC">Text 2</span></span>
<span class="classA">Text 1 <span class="classC">Text 2</span> Text 3</span>
<span class="classA">Text 1</span>

期望的结果：“文本1”

因此，出现类“classC”的 span 元素之后的所有内容都应该被忽略。也有可能“classC”根本不出现。

我已经尝试过

//span[@class="classA"]//text()[parent::*[not(@class="classC")]]

，这会忽略“classC”内容，但返回

<span class="classC">

之后的文本（第一个示例中的文本5）。

我怎样才能实现这个目标？

Answer 1

<script>
function extractTextFromHTML(html) {
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = html;

    // Remove all elements with class "classC" and their contents
    const classCElements = tempDiv.querySelectorAll('.classC');
    classCElements.forEach((element) => {
        element.parentNode.removeChild(element);
    });

    // Extract the remaining text
    return tempDiv.textContent.trim();
}

// Example usage:
var html1 = '<span class="classA">Text 1 <span class="classB">Text 2</span> Text 3 <span class="classC">Text 4</span> Text 5</span>';
console.log(extractTextFromHTML(html1)); // Output: "Text 1 Text 2 Text 3"

var html2 = '<span class="classA">Text 1 <span class="classC">Text 2</span></span>';
console.log(extractTextFromHTML(html2)); // Output: "Text 1"

var html3 = '<span class="classA">Text 1 <span class="classC">Text 2</span> Text 3</span>';
console.log(extractTextFromHTML(html3)); // Output: "Text 1 Text 3"

var html4 = '<span class="classA">Text 1</span>';
console.log(extractTextFromHTML(html4)); // Output: "Text 1"
</script>

try with this code.