Как выполнить итерацию и извлечь текст из контейнера тегов абзаца?

#javascript #html

#javascript #HTML

Вопрос:

У меня возникли проблемы с извлечением текста, хранящегося в некоторых тегах абзаца. Я хочу выполнить итерацию по тегам с помощью цикла ‘for’, извлечь их и объединить в одну строку с именем ‘text’, а затем предупредить ее. Я почти уверен, что большая часть настроек выполнена правильно, но чего мне не хватает?

 <div id = "myDiv">
<p> This is the first paragraph tag in the div.</p>
<p> I will try to loop through this div tag.</p>
<p> In order to get all of the elements used.</p>
<p> As well as the text in this div.</p>
</div>

<script>

var myDiv = document.getElementById("myDiv");
var pTags = myDiv.childNodes;
var text = ' ';

//creating iterator for pTags
for (var i = 0; i < pTags.length; i  ;){

//check for nodeType == text type

    if (pTags[i].nodeType == 3){

//combine nodevalue to one string

        text  = pTags[i].nodeValue;
        }
}
//alert said string

alert(text);
</script>

Я хотел бы объединить все абзацы в одну строку, а затем предупредить эту строку или что-то сделать со строкой. Моя задача — взять все эти теги и что-то сделать с сохраненным текстом.

1. я думаю, вы можете просто выполнить document.getElementById(«myDiv»).textContent

2. Добро пожаловать в stackoverflow. Во-первых, здесь ошибка: for (var i = 0; i < pTags.length; i ;){ (вы должны удалить последнее ‘;’). После этого вы должны заменить pTags[i].nodeValue на pTags[i].textContent

3. Я попробовал то, что вы сказали, но в итоге получилась пустая строка >.<

Ответ №1:

Вы можете создать массив textContent всех <p> элементов непосредственно внутри #myDiv с помощью строки запроса #myDiv > p и, используя его второй параметр, сопоставить каждый узел с его textContent. Затем просто соедините этот массив любым разделителем, который вы хотите:

 const arrOfPTexts = Array.from(
  document.querySelectorAll('#myDiv > p'),
  ({ textContent }) => textContent
);
const text = arrOfPTexts.join(' ');
console.log(text);

 <div id="myDiv">
  <p> This is the first paragraph tag in the div.</p>
  <p> I will try to loop through this div tag.</p>
  <p> In order to get all of the elements used.</p>
  <p> As well as the text in this div.</p>
</div>

1. Спасибо! Я довольно новичок в JavaScript и не знаком с методом querySelector. Мне нужно будет разобраться в этом, чтобы понять это. Спасибо!

2. querySelectorAll просто выбирает все теги, соответствующие определенной строке селектора — он использует точно такой же синтаксис и логику, как в CSS.

3. если вы не возражаете, не могли бы вы объяснить часть » , ({textContent}) => textContent);»? Как это связано с созданием массива? я предполагаю, что это как-то связано с настройкой того, что хранится в массиве, указывая на textContent тегов P.?

4. Второй параметр Array.from является необязательной функцией сопоставления, которая выполняется для первого параметра, подобного массиву, перед преобразованием во внешний arrOfPTexts . ({ textContent }) извлекает textContent свойство элемента и возвращает его — это означает, что результирующий массив представляет собой массив textContent значений, а не массив элементов. Другой способ: p => p.textContent

Ответ №2:

этого достаточно

 alert(document.getElementById('myDiv').innerText);

 <div id="myDiv">
  <p> This is the first paragraph tag in the div.</p>
  <p> I will try to loop through this div tag.</p>
  <p> In order to get all of the elements used.</p>
  <p> As well as the text in this div.</p>
</div>

1. Я предполагаю, что innerText получает весь текст внутри выбранного элемента? Я должен попробовать это. Спасибо!

2. вы можете просто запустить Run Code SNippet там:D и да, он немного отличается от моего примера, хотя, поскольку в нем есть новые строки, но вы cna .replace (» n»,»») их