Внутренний текст-это сцепление слов

#javascript #html #node.js

Вопрос:

Таким образом, HTML.outerHTML выводит <td><p><b>Ranges of</b><br><b>Exercise</b> <b>Prices</b></p></td>

HTML.Внутренний текст выводит «Диапазоны цен на услуги»

HTML-это элемент HTMLElement

Результат, который я пытаюсь получить, — это «Диапазоны цен на упражнения». И innerText, и textContent дают один и тот же неверный результат. Как я могу предотвратить объединение строк с присутствующими тегами разрыва строк? (Не могу изменить HTML)

Комментарии:

1. в тексте нет html…. поэтому я не уверен, как вы сопоставляете HTML с текстом. То, что вы хотите сделать, должно быть немного сложнее, так как нет метода DOM, чтобы знать, есть ли разрыв строки с тегом.

2. Какова точная разметка HTML, которую вы пытаетесь прочитать?

3. @epascarello <p><p><b>Диапазоны<b></b></b><br><br><b><b> < /b> </b><b>Цены<b></b></b></p>

4. Я не сопоставляю html с текстом, я просто пытался показать результат внешнего и внутреннего текста

5. Между тегами нет пробелов, поэтому вы пытаетесь сделать так, чтобы тег <br> был пробелом.

Ответ №1:

Это довольно простой способ, но вы можете заменить элемент br пробелом, чтобы он отображался как пробел при его замене.

 const temp = document.querySelector('.test').innerHTML;
const cloned = (new DOMParser()).parseFromString(temp, 'text/html');
 cloned.documentElement.querySelectorAll('br').forEach(function (br) {
   br.replaceWith(' ');
});
console.log(cloned.body.textContent); 
 <div class="test"><p><b>Ranges of</b><br><b>Exercise</b> <b>Prices</b></p></div> 

Комментарии:

1. br.replaceWith(‘ ‘); вызывает проблемы с сборкой. Я получаю бесполезную ошибку «сборка сценария запуска npm завершилась с кодом 2» (я всегда получаю ее, когда она не выполняется). Единственное отличие моего кода в том, что я использую HTML.outerHTML для установки температуры вместо документа. querySelector(‘.test’).innerHTML. Имеет ли значение эта разница?

Ответ №2:

 function getTextContent() {
  alert(document.getElementById("demo").textContent)
} 
 <p id="demo"><b>Ranges of </b><br><b>Exercise</b> <b>Prices</b></p>
<button onclick="getTextContent()">Get textContent</button> 

Вы можете использовать textContent , чтобы получить только текст внутри p тега

Комментарии:

1. Вы добавили пробел, после of которого и заключается весь смысл вопроса.

2. @пилчард, да. Если не добавлять пробел, он будет выглядеть так Ranges ofExercise Prices

3. Именно в этом и заключается главный вопрос. Без изменения HTML извлеките текст с соответствующим пробелом между » из » и «Упражнение». (который в настоящее время является элементом <br>).

4. Хорошо … я думаю <br> , что не превращаюсь в пространство.

5. Правильно, я не могу изменить HTML