Question

我想获取每个段落中的文本（不是纯文本，但也要设置格式），但不包括其可能的链接。请以纯JavaScript而非jQuery向我解释。

*我既不想使用ID，也不想使用getElementById（）方法。

示例：

for (i = 0; i < document.getElementsByTagName('p').length; i++){
    
    p = document.getElementsByTagName('p')[i];

      
   document.write(p.innerHTML);  /* Here I have the text of each paragraph but also with the links*/
   
   
}

<p>This is a <a href="https://www.google.com">first</a> search engine.</p>
<div>Here I have also some text</div>
<p>This is a <b>web browser</b>.</p>
<p>This is another <a href="https://www.bing.com">second</a> search engine.</p>

我想要的结果应该是：

“这是一个搜索引擎。这是一个网络浏览器。这是另一个搜索引擎。”

Answer 1

这种方式如何：

查找所有“ p”个元素。
为在迭代元素内部查找锚点的每个元素循环。
如果找到，请从DOM中删除。

const textElements = document.querySelectorAll('p');

textElements.forEach(function (element) {
    element.querySelectorAll('a').forEach(function (anchor) {
        anchor.remove();
    });
});

  <p>This is a <a href="https://www.google.com">first</a> search engine.</p>
  <div>Here I have also some text</div>
  <p>This is a <b>web browser</b>.</p>
  <p>This is another <a href="https://www.bing.com">second</a> search engine.</p>

带有for循环和document.getElementsByTag的代码段

const textElements = document.getElementsByTagName('p');

for (var i = 0; i < document.getElementsByTagName('p').length; i++) {
    // get next p tag
    var someParagraphElement = document.getElementsByTagName('p')[i];
    
    // length of tag inside paragraph
    var lenghtOfA = someParagraphElement.getElementsByTagName('a').length;
    if(lenghtOfA){
        for (var j = 0; j < lenghtOfA; j++) {

            // a tag inside p 
            var aTag = someParagraphElement.getElementsByTagName('a')[j];
            aTag.remove();
        }

    }
}

<p>This is a <a href="https://www.google.com">first</a> search engine.</p>
      <div>Here I have also some text</div>
      <p>This is a <b>web browser</b>.</p>
      <p>This is another <a href="https://www.bing.com">second</a> search engine.</p>

Answer 2

您可以只复制元素的DOM，然后从其中删除锚元素，然后索取textContent：

let container = document.createElement('div');

[...document.getElementsByTagName('p')].forEach(p => container.innerHTML += p.innerHTML);

// remove links
[...container.querySelectorAll('*')].forEach(el => {
  if (el.tagName === 'A') el.remove();
})

console.log(container.innerHTML);

document.getElementById('result').innerHTML = container.innerHTML;

<p>This is a <a href="https://www.google.com">first</a> search engine.</p>
<div>Here I have also some text</div>
<p>This is a <b>web browser</b>.</p>
<p>This is another <a href="https://www.bing.com">second</a> search engine.</p>

<div id="result"></div>

在ECMAScript 5中，这里基本上是相同的解决方案，您可能会更习惯：

// create a container element not in the DOM to copy stuff to
var container = document.createElement('div');

// get all paragraph elements
var paras = document.getElementsByTagName('p');

// iterate over each paragraph and add its innerHTML to the container
for (var i = 0; i < paras.length; i++) {
  container.innerHTML += paras[i].innerHTML
}

// get all container child elements
var containerChildren = container.querySelectorAll('*');

// iterate over them and remove any links
for (var j = 0; j < containerChildren.length; j++) {
  if (containerChildren[j].tagName === 'A') containerChildren[j].remove();
}

console.log(container.innerHTML);

// make the result visible
document.getElementById('result').innerHTML = container.innerHTML;

<p>This is a <a href="https://www.google.com">first</a> search engine.</p>
<div>Here I have also some text</div>
<p>This is a <b>web browser</b>.</p>
<p>This is another <a href="https://www.bing.com">second</a> search engine.</p>

<div id="result"></div>

如何在元素P内获取文本，其中不包括带有javascript DOM的可能的子元素A？

2 个答案: