Как я могу получить текст внутри элемента P, исключая их возможные дочерние элементы A с помощью JavaScript DOM?

Question

Я хочу получить текст (не простой текст, а также отформатированный) внутри каждого абзаца, исключая их возможные ссылки.Пожалуйста, объясните мне в чистом javascript, а не jQuery.

* Я не хотел бы использовать ни идентификаторы, ни метод 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

Вы можете просто сделать копию элементов вне 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>

Answer 2

А как же так:

1. Найти все элементы 'p'.
2. Цикл для каждого элемента, ищущего внутри повторяющегося элемента для привязок.
3. Если найдено, удалить из 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>