Как создать строковую карту "местоположение" и "текст значения местоположения" для этого строкового текста?

#html #string #typescript #dom #pattern-matching

#HTML #строка #машинопись #dom #сопоставление с образцом

Вопрос:

Я разработал проект с использованием anguler с фреймворком ngRx. Я использовал TypeScript с HTML для разработки интерфейса.В моей базе данных сохранены тексты формата «HTML», как показано ниже.

  "<html><body><a href="C:UsersKDocumentsdocker_command.txt">A.txt </a>
               <a href="C:UsersDocumentsB.txt">B.txt </a>
               <a href="C:UsersKDocumentsD.txt">D.txt </a>
               <a href="https:\www.facebook.com">www.facebook.com </a>
  </body></html>"

Этот текст, в частности, я правильно отображаю в html-файле, используя <dev INNERHTML ={{stringText }} > like wise.
Но мой проект, использующий JxBrowser и его конфигурацию, не может быть открыт напрямую в браузере по умолчанию, нажав просто ссылку.

Для этой работы мне нужно использовать href location в качестве URL-адреса и при щелчке передавать его в файл .ts.

Я думал, это изменится следующим <a role="button" click='getLink(myText)'> {{getLink(value}} </a>' образом. итак, создайте это, мне нужно, чтобы текст помещал массив, содержащий «местоположение» и значение.Затем я повторяю этот массив в HTML-файле.

Для этого мне нужна экспертная помощь? Я борюсь с отображением приведенного выше текста в такой массив строк (например: array[hrfeLink][value]) . Надеюсь, мне поможет какой-нибудь эксперт.

————Обновлено—————

Согласно комментарию, я попробую этот способ, и я могу указать местоположение ссылки. Но все равно не смог принять значение.

   let parser = new DOMParser();
  let doc = parser.parseFromString(info, "text/html");
  let x = doc.getElementsByTagName('a');
  for (let i = 0; i < x.length ; i  ) {
     console.log(x[i].getAttribute('href'));
  }

1. Существует два подхода: вы можете использовать регулярные выражения для извлечения значений из строки HTML или вы можете разобрать HTML в документе javascript. Я рекомендую синтаксический анализ.

2. Не могли бы вы, пожалуйста, привести мне пример, как я могу использовать DOMParser. Я создам объект let x =new DOMParser() . и parser -> пусть doc = parser.parseFromString(stringHTML, «application / html») текст, подобный этому

Ответ №1:

value Чего вы хотите? Это якорный текст ссылки?

Мы создаем интерфейс Link со свойствами, которые мы хотим от каждой ссылки

 interface Link {
    location: string;
    value: string;
}

Затем мы создаем функцию, которая извлекает все ссылки из строки html и преобразует их в массив Link объектов.

 function parseLinks( stringHTML: string ): Link[] {
    // create a parser object
    const parser = new DOMParser();
    // turn the string into a Document
    const doc = parser.parseFromString( stringHTML, "text/html" );
    // get all links
    const linkNodes = doc.getElementsByTagName('a');
    // convert from HTMLCollection to array to use .map()
    const linksArray = [...linkNodes];
    // map from HTMLAnchorElement to Link object
    return linksArray.map( element => ({
        location: element.href,
        value: element.innerText,
    }))
}

Теперь вы можете делать что угодно со ссылками из вашего текста

 const text = `<html><body><a href="C:UsersKDocumentsdocker_command.txt">A.txt </a>
               <a href="C:UsersDocumentsB.txt">B.txt </a>
               <a href="C:UsersKDocumentsD.txt">D.txt </a>
               <a href="https:\www.facebook.com">www.facebook.com </a>
  </body></html>`;

const links: Link[] = parseLinks( text );

// can use like this
links.map( ({location, value}) => {
    // do something here
})

Ссылка на Typescript Playground