替换非渲染（非显示）元素文本中的 ↵ (\n)

我正在编写一个解析器，从隐藏的 iframe 中获取数据。

在文本中我需要替换\n(↵) 个字符（空间）。 我用它来完成这项任务 -text.replace(/\n/gi, " ")。 但是，它仅适用于可见元素（即没有display: none）。 如果该元素不可见（display: none) 新行就消失了并且没有得到任何替代。

HTML 示例：

<div data-custom="languages">
    <div>
        <div>
            <h2>
                <span>Just a text that will be removed</span>
            </h2>
            <p>A - b</p>
            <p>c - d</p>
        </div>
    </div>
</div>

JS示例：

visibleIframe.style.display = "block";
invisibleIframe.style.display = "none";

const visibleDivWithNestedDivs = visibleIframe.querySelector(`[data-custom="languages"]`);
const invisibleDivWithNestedDivs = invisibleIframe.querySelector(`[data-custom="languages"]`);

const visibleText = visibleDivWithNestedDivs.innerText; // "A - b↵c - d"
const invisibleText = invisibleDivWithNestedDivs.innerText; // "A - b↵c - d"

console.log(visibleText.replace(/\n/gi, " ")); // "A - b c - d" (expected result)
console.log(invisibleText.replace(/\n/gi, " ")); // "A - bc - d" (unexpected result, no space between "b" and "c")

我尝试过的：

.replace(/\n/gi, " ")
.replace(/\r\n/gi, " ")
.replace(/↵/gi, " ")
.replace(/↵↵/gi, " ") // in some cases there was two of this.
.split("↵").join(" ") 
.split("\n").join(" ")
white-space: pre
white-space: pre-wrap

你测试了吗？

我99%确定这是因为display: none。我测试了它，不同的 iframe 显示给了我不同的结果。

文本内容

我不需要textContent因为这会返回一个没有文本的文本\n人物。我用innerText.

问题：

1. 意想不到的结果难道不是因为那样吗display: none?
2. 我该怎么做才能达到预期的效果？

首先，让我们根据您提供的示例澄清一些您似乎存在的误解。

↵是一个 unicode 字符，描述为带有角向左的向下箭头。当然，它可以很好地直观地表示换行符或 Return/Enter 键，但它在代码中没有任何意义。如果您在正则表达式中使用此符号，则正则表达式将尝试匹配包含箭头符号的文本。

在大多数编程语言中，\n字符串中的 表示换行符，您不必担心它在幕后的表示方式，无论是 CR、LF 还是两者兼而有之。所以我不会使用\r在 JavaScript 中。

.replace(/\n/gi, " ")是一个完全有效的选项，具体取决于您想要做什么。但是，您可能想要替换任何包含换行符的空白序列。在这种情况下，我会用这个来代替：.replace(/\s+/, " "). The \sRegExp 中的特殊代码匹配任何类型的空白，包括换行符。添加一个+使其匹配任何空白序列。使用这个将确保像这样的字符串"a \n \n b"变成"a b".

现在正则表达式问题已经解决了，让我们看一下innerText。根据HTML 生活标准 https://html.spec.whatwg.org/multipage/dom.html#the-innertext-idl-attribute我通过查看发现innerText 的 MDN 文章 https://developer.mozilla.org/en-US/docs/Web/API/Node/innerText, the innerText属性是用户从该元素复制粘贴文本时将获得的近似值。它的定义如下：

如果未呈现此元素，或者用户代理是非 CSS 用户代理，则返回与此元素上的 textContent IDL 属性相同的值。注意：此步骤可能会产生令人惊讶的结果，因为当在未呈现的元素上访问 innerText 属性时，会返回其文本内容，但在正在呈现的元素上访问时，其所有未呈现的子元素都会返回他们的文本内容被忽略。

这解释了为什么可见元素和隐藏元素之间可能存在差异。至于换行符的数量，确定字符串中有多少换行符的算法是在标准页 https://html.spec.whatwg.org/multipage/dom.html#the-innertext-idl-attribute这非常令人困惑，这就是为什么我建议不要将您的逻辑基于此函数的行为。innerText是一个近似值。

我建议看一下文本内容 https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent，不受 CSS 影响。

总结一下这个很长的解释：

1. Yes, display: none确实影响innerText
2. 我可能会用foo.textContent.replace(/\s+/g, " ")取决于你的目标是什么。