Arhn - архитектура программирования

Извлечь текст из строки HTML с помощью JavaScript

Я пытаюсь получить внутренний текст строки HTML, используя функцию JS (строка передается в качестве аргумента). Вот код:

function extractContent(value) {
  var content_holder = "";

  for (var i = 0; i < value.length; i++) {
    if (value.charAt(i) === '>') {
      continue;
      while (value.charAt(i) != '<') {
        content_holder += value.charAt(i);
      }
    }

  }
  console.log(content_holder);
}

extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>");

Проблема в том, что ничего не печатается на console(*content_holder* stays empty). Я думаю, что проблема вызвана оператором ===.

javascript text string html extract
06.03.2015

Ответы:


1

Создайте элемент, сохраните в нем HTML и получите его textContent:

function extractContent(s) {
  var span = document.createElement('span');
  span.innerHTML = s;
  return span.textContent || span.innerText;
};
    
alert(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>"));

Вот версия, которая позволяет вам иметь пробелы между узлами, хотя вы, вероятно, захотите это только для элементов уровня блока:

function extractContent(s, space) {
  var span= document.createElement('span');
  span.innerHTML= s;
  if(space) {
    var children= span.querySelectorAll('*');
    for(var i = 0 ; i < children.length ; i++) {
      if(children[i].textContent)
        children[i].textContent+= ' ';
      else
        children[i].innerText+= ' ';
    }
  }
  return [span.textContent || span.innerText].toString().replace(/ +/g,' ');
};
    
console.log(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>.  Nice to <em>see</em><strong><em>you!</em></strong>"));

console.log(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>.  Nice to <em>see</em><strong><em>you!</em></strong>",true));

06.03.2015
  • Выводы HelloW3C - действительно то, что хотел ОП? Не Hello W3C? 06.03.2015
  • Нет, пробелы не нужны :) Извините, что не упомянул! 06.03.2015
  • Добавлена ​​версия, которая может добавлять пробелы между узлами. 06.03.2015
  • delete span ничего не делает. 06.03.2015
  • @torazaburo, спасибо, я не был уверен в этом. Отредактировано. 06.03.2015
  • к вашему сведению, часть о добавлении пробелов не работает должным образом для всех типов вложенных узлов: extractContent("<div>foo<div>bar</div></div>", true) производит "foobar " 17.06.2020
  • @Xerillio, хорошая мысль. Потребуется больше кода, чтобы отличить блочные элементы от встроенных, особенно если учесть, что CSS может изменить блочный уровень на встроенный и наоборот. 17.06.2020

    • 2

    Однострочный (точнее, один оператор) вариант:

    function extractContent(html) {

    return new DOMParser().parseFromString(html, "text/html") . 
        documentElement . textContent;

}
    06.03.2015
  • хороший ответ +1, но в чем разница между вашим ответом и ответом Rick Hitchcock 06.03.2015
  • @shariqueansari, DOMParser — это экспериментальная технология, но, скорее всего, она будет добавлена ​​в спецификацию. Его поддержка HTML работает в IE10+. Мой первоначальный ответ работал в IE9+, но теперь я обновил его для поддержки IE8. 06.03.2015
  • DOMParser теперь имеет широкую поддержку, см. caniuse.com/#search=domparser. 29.06.2018
  • надеялся, что это сработает на nodejs, но это не так. в итоге использовал npmjs.com/package/html2plaintext 14.01.2019
  • Можем ли мы использовать этот метод для извлечения некоторого содержимого по идентификатору, например: document.getElementById? 29.03.2019

    • 3

    textContext — очень хороший метод для достижения желаемых результатов, но иногда мы не хотим загружать DOM. Таким простым обходным путем будет следующее регулярное выражение:

    let htmlString = "<p>Hello</p><a href='http://w3c.org'>W3C</a>"
let plainText = htmlString.replace(/<[^>]+>/g, '');
    24.01.2019
  • Я знаю, что это очень старый комментарий, но не могли бы вы объяснить значение выражения /‹[^›]+›/g ? Мне трудно понять, что означает каждый отдельный символ. 30.07.2019
  • @Kelly Символы, на которые вы ссылаетесь, являются регулярными выражениями. Это что-то вроде мини-языка программирования для разбора текста. Вот ссылка, где вы можете узнать больше о каждом символе: developer .mozilla.org/en-US/docs/Web/JavaScript/Guide/ 27.12.2019
  • По сути, это говорит о том, что нужно найти и удалить каждый ‹, в котором есть элементы, не являющиеся › между ним и ›. 27.12.2019
  • самое полезное, регулярное выражение, один из лучших инструментов/мини-языков для программистов. 06.05.2020
  • Разная техника для разных случаев, и это правильный подход для моего случая, разработка бота Telegram, который не требует innerHTML или чего-то, что требуется в веб-разработке. 09.12.2020

    • 4

    используйте этот regax для удаления тегов html и сохраняйте только внутренний текст в html

    он показывает HelloW3c, только проверьте его

    var content_holder = value.replace(/<(?:.|\n)*?>/gm, '');
    06.03.2015
  • пожалуйста, дайте мне причину, пожалуйста? 06.03.2015
  • stackoverflow.com/questions/1732348/ 06.03.2015
  • Если вы собираетесь использовать регулярное выражение, более простой версией будет /<[\s\S]*?>/ или /<[^]*?>/. Ваш флаг m ничего не дает; это относится к поведению ^ и $. 06.03.2015

    • 5

    Попробуй это:-

    <!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function extractContent(value){
        var div = document.createElement('div')
        div.innerHTML=value;
        var text= div.textContent;            
        return text;
}
window.onload=function()
{
   alert(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>"));
};
</script>
</body>
</html>

    06.03.2015
  • Вы проверяли это? Он не может извлечь W3C должным образом. 06.03.2015
  • Пожалуйста, попробуйте ваше решение со строкой Hello, <p>Buggy<i>World</i></p>. 06.03.2015

    • 6

    Вы можете временно записать его в элемент блочного уровня, расположенный за пределами страницы... что-то вроде этого:

    HTML:

    <div id="tmp" style="position:absolute;top:-400px;left:-400px;">
</div>

    JavaScript:

    <script type="text/javascript">
function extractContent(value){
        var div=document.getElementById('tmp');
        div.innerHTML=value;
        console.log(div.children[0].innerHTML);//console out p
}

extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>");
</script>
    06.03.2015
  • Правильный подход, но для этого вам не нужен элемент в DOM. Просто создайте элемент с var div = document.createElement('div') и действуйте оттуда. 06.03.2015
  • Кроме того, это не удастся сделать с вложенными элементами HTML, такими как <p>Hello<i>Bob</i></p><a>...</a>. Он сохранит разметку внутри элемента p. 06.03.2015

    • 7

    вам нужен массив для хранения значений

      function extractContent(value) {
var content_holder = new Array();

for(var i=0;i<value.length;i++) {
    if(value.charAt(i) === '>') {
        continue;
        while(value.charAt(i) != '<') {
            content_holder.push(value.charAt(i));
            console.log(content_holder[i]);
        }
    }
}
}extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>");
    06.03.2015
  • Вам не нужен массив, если вы хотите, чтобы результаты были строкой, но наличие массива позволит пользователю получить доступ к каждому результату/значению. 06.03.2015
  • Вы не исправили основную логическую ошибку в коде OP. Вы проверяли это? 06.03.2015
  • я думаю нет 06.03.2015
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..