Получить данные из HTML-текста с помощью javascript в angular

#javascript #html #angular

#язык JavaScript #HTML #угловой

Вопрос:

Я пытаюсь получить данные из html — текста .

Сначала получаем html-текст :

 const url = "https://********/dash/video/mp4/RP4-6"; this.http2.get(url, { responseType: "text" as "json" }).subscribe(  (result) =gt; {  console.log(result) // result as html text },  (error) =gt; {} );  

результат html :

 lt;htmlgt; lt;headgt;lt;titlegt;Index of /dash/video/mp4/RP4-6/lt;/titlegt;lt;/headgt; lt;bodygt; lt;h1gt;Index of /dash/video/mp4/RP4-6/lt;/h1gt;lt;hrgt;lt;pregt;lt;a href="../"gt;../lt;/agt; lt;a href="21-10-27-13-14.mp4"gt;21-10-27-13-14.mp4lt;/agt; 27-Oct-2021 10:15 689323 lt;a href="21-10-27-13-17.mp4"gt;21-10-27-13-17.mp4lt;/agt; 27-Oct-2021 10:18 749977 lt;a href="21-10-27-13-19.mp4"gt;21-10-27-13-19.mp4lt;/agt; 27-Oct-2021 10:20 704187 lt;a href="21-10-27-13-21.mp4"gt;21-10-27-13-21.mp4lt;/agt; 27-Oct-2021 10:22 665388 lt;a href="21-10-27-13-22.mp4"gt;21-10-27-13-22.mp4lt;/agt; 27-Oct-2021 10:23 626806 lt;a href="21-10-27-13-25.mp4"gt;21-10-27-13-25.mp4lt;/agt; 27-Oct-2021 10:26 609054 lt;a href="21-10-27-13-31.mp4"gt;21-10-27-13-31.mp4lt;/agt; 27-Oct-2021 10:32 684083 lt;a href="21-10-27-13-38.mp4"gt;21-10-27-13-38.mp4lt;/agt; 27-Oct-2021 10:39 697931 lt;a href="21-10-27-13-39.mp4"gt;21-10-27-13-39.mp4lt;/agt; 27-Oct-2021 10:40 806641 lt;a href="21-10-27-13-42.mp4"gt;21-10-27-13-42.mp4lt;/agt; 27-Oct-2021 10:43 689665 lt;a href="21-10-27-13-44.mp4"gt;21-10-27-13-44.mp4lt;/agt; 27-Oct-2021 10:45 745707 lt;a href="21-10-27-13-45.mp4"gt;21-10-27-13-45.mp4lt;/agt; 27-Oct-2021 10:46 751812 lt;a href="21-10-27-13-47.mp4"gt;21-10-27-13-47.mp4lt;/agt; 27-Oct-2021 10:48 624906 lt;a href="21-10-27-13-50.mp4"gt;21-10-27-13-50.mp4lt;/agt; 27-Oct-2021 10:51 773567 lt;a href="21-10-27-13-53.mp4"gt;21-10-27-13-53.mp4lt;/agt; 27-Oct-2021 10:54 824234 lt;a href="21-10-27-13-54.mp4"gt;21-10-27-13-54.mp4lt;/agt; 27-Oct-2021 10:55 830270 lt;a href="21-10-27-13-56.mp4"gt;21-10-27-13-56.mp4lt;/agt; 27-Oct-2021 10:57 824970 lt;a href="21-10-27-13-57.mp4"gt;21-10-27-13-57.mp4lt;/agt; 27-Oct-2021 10:58 830408 lt;a href="21-10-27-14-00.mp4"gt;21-10-27-14-00.mp4lt;/agt; 27-Oct-2021 11:01 833959 lt;a href="21-10-27-14-01.mp4"gt;21-10-27-14-01.mp4lt;/agt; 27-Oct-2021 11:02 823081 lt;a href="21-10-27-14-04.mp4"gt;21-10-27-14-04.mp4lt;/agt; 27-Oct-2021 11:05 823855 lt;a href="21-10-27-14-05.mp4"gt;21-10-27-14-05.mp4lt;/agt; 27-Oct-2021 11:06 827716 lt;a href="21-10-27-14-06.mp4"gt;21-10-27-14-06.mp4lt;/agt; 27-Oct-2021 11:07 830899 lt;a href="21-10-27-14-07.mp4"gt;21-10-27-14-07.mp4lt;/agt; 27-Oct-2021 11:08 831162 lt;a href="21-11-02-14-45.mp4"gt;21-11-02-14-45.mp4lt;/agt; 02-Nov-2021 12:46 765390 lt;a href="21-11-02-14-46.mp4"gt;21-11-02-14-46.mp4lt;/agt; 02-Nov-2021 12:47 709565 lt;a href="21-11-02-14-50.mp4"gt;21-11-02-14-50.mp4lt;/agt; 02-Nov-2021 12:51 728354 lt;a href="21-11-02-14-51.mp4"gt;21-11-02-14-51.mp4lt;/agt; 02-Nov-2021 12:52 730780 lt;a href="21-11-02-14-52.mp4"gt;21-11-02-14-52.mp4lt;/agt; 02-Nov-2021 13:00 117131 lt;a href="21-11-02-14-54.mp4"gt;21-11-02-14-54.mp4lt;/agt; 02-Nov-2021 12:55 657311 lt;a href="21-11-02-14-55.mp4"gt;21-11-02-14-55.mp4lt;/agt; 02-Nov-2021 12:56 592647 lt;a href="21-11-02-15-02.mp4"gt;21-11-02-15-02.mp4lt;/agt; 02-Nov-2021 13:03 601726 lt;a href="21-11-02-15-08.mp4"gt;21-11-02-15-08.mp4lt;/agt; 02-Nov-2021 15:14 166307 lt;a href="21-11-02-15-13.mp4"gt;21-11-02-15-13.mp4lt;/agt; 02-Nov-2021 13:14 802128 lt;a href="21-11-02-17-16.mp4"gt;21-11-02-17-16.mp4lt;/agt; 02-Nov-2021 15:17 735023 lt;a href="21-11-02-17-17.mp4"gt;21-11-02-17-17.mp4lt;/agt; 02-Nov-2021 15:18 716030 lt;a href="21-11-02-17-18.mp4"gt;21-11-02-17-18.mp4lt;/agt; 02-Nov-2021 15:19 794337 lt;a href="21-11-02-17-22.mp4"gt;21-11-02-17-22.mp4lt;/agt; 02-Nov-2021 15:23 757134 lt;a href="21-11-02-17-23.mp4"gt;21-11-02-17-23.mp4lt;/agt; 02-Nov-2021 15:24 831960 lt;a href="21-11-02-17-28.mp4"gt;21-11-02-17-28.mp4lt;/agt; 02-Nov-2021 15:29 715001 lt;a href="21-11-02-17-30.mp4"gt;21-11-02-17-30.mp4lt;/agt; 02-Nov-2021 15:31 743813 lt;a href="21-11-02-17-32.mp4"gt;21-11-02-17-32.mp4lt;/agt; 02-Nov-2021 15:33 754264 lt;a href="21-11-02-17-34.mp4"gt;21-11-02-17-34.mp4lt;/agt; 02-Nov-2021 15:35 791702 lt;a href="21-11-02-17-36.mp4"gt;21-11-02-17-36.mp4lt;/agt; 02-Nov-2021 15:37 793964 lt;a href="21-11-02-17-37.mp4"gt;21-11-02-17-37.mp4lt;/agt; 02-Nov-2021 15:38 766486 lt;a href="21-11-02-17-41.mp4"gt;21-11-02-17-41.mp4lt;/agt; 02-Nov-2021 15:42 825196 lt;a href="21-11-02-17-44.mp4"gt;21-11-02-17-44.mp4lt;/agt; 02-Nov-2021 15:45 794551 lt;a href="21-11-02-17-46.mp4"gt;21-11-02-17-46.mp4lt;/agt; 02-Nov-2021 15:47 818823 lt;a href="21-11-02-17-47.mp4"gt;21-11-02-17-47.mp4lt;/agt; 02-Nov-2021 15:48 803400 lt;a href="21-11-02-17-48.mp4"gt;21-11-02-17-48.mp4lt;/agt; 02-Nov-2021 15:49 833760 lt;a href="21-11-04-12-03.mp4"gt;21-11-04-12-03.mp4lt;/agt; 04-Nov-2021 10:04 565540 lt;a href="21-11-04-12-09.mp4"gt;21-11-04-12-09.mp4lt;/agt; 04-Nov-2021 10:10 764848 lt;a href="21-11-04-12-10.mp4"gt;21-11-04-12-10.mp4lt;/agt; 04-Nov-2021 10:11 818846 lt;a href="21-11-04-12-11.mp4"gt;21-11-04-12-11.mp4lt;/agt; 04-Nov-2021 10:12 688041 lt;a href="21-11-04-12-13.mp4"gt;21-11-04-12-13.mp4lt;/agt; 04-Nov-2021 10:14 752951 lt;a href="21-11-04-12-19.mp4"gt;21-11-04-12-19.mp4lt;/agt; 04-Nov-2021 10:20 786564 lt;/pregt;lt;hrgt;lt;/bodygt; lt;/htmlgt;  

Я хочу получить все данные в href виде 21-11-04-12-13.mp4 .

После некоторого поиска у меня возникла идея преобразовать html-текст в объект JSON, можно ли это сделать ? Потому что эта страница не исправлена, и данные внутри нее изменятся.

Как я могу решить эту проблему?

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

1. Просто используйте регулярное выражение.

2. Создание новых объектов в JavaScript для хранения данных-это нормально, но это не «JSON», потому что вы ничего не делаете с объектными литералами .

3. правильно, как использовать регулярное выражение ? простой пример мне очень помогает, мистер. @Dai

Ответ №1:

Вы можете сделать это с помощью регулярного выражения, просто сделайте это так :

 let tab = []; tab = str.match(/(?lt;=href="). ?(?=")/gm); //remove the first element because it's "../" (line 4 of your example) tab = tab.slice(1);  

Результатом будет массив со всеми нужными вам ссылками

Ответ №2:

Вы можете использовать a RegExp для извлечения текстовых значений, соответствующих определенным шаблонам, а затем возвращать эти значения внутри JS object .

Шаблон регулярного выражения gt;(dd-dd-dd-dd-dd.mp4)lt; будет соответствовать содержимому #text узлов lt;agt;lt;/agt; элементов, хотя вы можете предпочесть href="" вместо этого сопоставить атрибут, например:

href="(dd-dd-dd-dd-dd.mp4)"gt;


 function extractFileNames( html: string ): string[] {    const reg = /gt;dd-dd-dd-dd-dd.mp4lt;/ig;    const matches: string[] = [];   let match: RegExpExecArray | null = null;  while( ( match = reg.exec( html ) ) !== null ) {    matches.push( match[0] );  }   return matches; }  

Вот демонстрационная версия JS (аннотации типа машинописного текста с комментариями):

 const sampleInput = `  lt;a href="21-10-27-14-00.mp4"gt;21-10-27-14-00.mp4lt;/agt; 27-Oct-2021 11:01 833959 lt;a href="21-10-27-14-01.mp4"gt;21-10-27-14-01.mp4lt;/agt; 27-Oct-2021 11:02 823081 lt;a href="21-10-27-14-04.mp4"gt;21-10-27-14-04.mp4lt;/agt; 27-Oct-2021 11:05 823855 lt;a href="21-10-27-14-05.mp4"gt;21-10-27-14-05.mp4lt;/agt; 27-Oct-2021 11:06 827716 lt;a href="21-10-27-14-06.mp4"gt;21-10-27-14-06.mp4lt;/agt; 27-Oct-2021 11:07 830899 lt;a href="21-10-27-14-07.mp4"gt;21-10-27-14-07.mp4lt;/agt; 27-Oct-2021 11:08 831162 lt;a href="21-11-02-14-45.mp4"gt;21-11-02-14-45.mp4lt;/agt; 02-Nov-2021 12:46 765390 lt;a href="21-11-02-14-46.mp4"gt;21-11-02-14-46.mp4lt;/agt;` ;   function extractFileNames( html/*: string */ )/*: string[] */ {    const reg = /gt;(dd-dd-dd-dd-dd.mp4)lt;/ig;    const matches/*: string[]*/ = [];   let match/*: RegExpExecArray | null*/ = null;  while( ( match = reg.exec( html ) ) !== null ) {    const entireMatch = match[0];  const justFileNameGroup = match[1];  matches.push( justFileNameGroup );  }   return matches; }  function doTheThing() {    const extracted = extractFileNames( sampleInput );  //console.log (extracted );   const ul = document.getElementById( 'output' );  for( const m of extracted ) {  const li = document.createElement( 'li' );  li.textContent = m;  ul.appendChild( li );  }   } 
 lt;button type="button" onclick="doTheThing()"gt;Click melt;/buttongt;  lt;ul id="output"gt;lt;/ulgt; 

Ответ №3:

Сначала вы можете преобразовать текст своего ответа в документ, а затем использовать API DOM для извлечения значений href

 let doc =new DOMParser().parseFromString(result, "text/xml") const anchors= doc.getElementsByTagName('a');  let urlList =[]; for (let anchor of anchors) {  urlList.push(cell.getAttribute('href'); }