Question

我有一个像这样的HTML：

<div id="info">
    <h1> My title </h1?
    <div>
        <p> Here is a text and one paragraph </p>
        <p> Another paragraph </p>
    </div>
</div>

我想在没有整个div #info的标签的情况下使用内部文本。所以我用这个：

document.querySelector('div#info').textContent

结果有一些这样的空格：

"
    My title




Here is a text and one paragraph
Another Paragraph




"

任何想法是否有任何命令可以将结果赋予这样一行：

 "My title Here is a text and one paragraph Another Paragraph"

我也尝试innerText()，但它又有空格。

Answer 1

你需要一个正则表达式来删除所有的换行符和多余的空格：

.replace(/[\n\r]+|[\s]{2,}/g, ' ')

然后你可以.trim()该通话的结果：

console.log(
  document.querySelector('div#info')
          .textContent
          .replace(/[\n\r]+|[\s]{2,}/g, ' ').trim()
)

<div id="info">
    <h1> My title </h1>
    <div>
        <p> Here is a text and one paragraph </p>
        <p> Another paragraph </p>
    </div>
</div>

Answer 2

由于文字中有多个空格，因此您可以使用string.replace用单个空格替换多个空格。

您还应该使用string.trim()排除尾随和前导空格。

var text = document.querySelector('div#info').textContent
console.log(text.replace(/\s+/g, " ").trim())

<div id="info">
    <h1> My title </h1>
    <div>
        <p> Here is a text and one paragraph </p>
        <p> Another paragraph </p>
    </div>
</div>

Answer 3

您可以使用正则表达式删除所有空格。

＆＃13;

console.log(document.querySelector('div#info').textContent.replace(/\s{2,}/g,' '));

＆＃13;

<div id="info">
    <h1> My title </h1?
    <div>
        <p> Here is a text and one paragraph </p>
        <p> Another paragraph </p>
    </div>
</div>

＆＃13;

textContent（）没有格式化文本的空格

3 个答案: