如何创建此字符串文本的字符串映射 "location" 和 "location Value Text"？

Question

我使用 anguler 和 ngRx 框架开发了一个项目。我将 TypeScript 与 HTML 一起用于开发前端-end.My 数据库已保存 'HTML' 格式文本，如下所示。

 "<html><body><a href="C:\Users\K\Documents\docker_command.txt">A.txt </a>
               <a href="C:\Users\Documents\B.txt">B.txt </a>
               <a href="C:\Users\K\Documents\D.txt">D.txt </a>
               <a href="https:\www.facebook.com">www.facebook.com </a>
  </body></html>"

我私下使用 <dev INNERHTML ={{stringText }} \> 直接在 html 文件中呈现此文本。但是我的项目使用 JXBrowser 并且因为它的配置，这不能直接在默认浏览器中打开，只需单击 link.

对于这项工作，我需要将 href 位置设为 URL 并在单击时将其传递给 .ts 文件。

我想，它会变成这样<a role="button" click='getLink(myText)'> {{getLink(value}} </a>'。所以，创建这个，我需要那个文本放一个包含 'location' 和 value.Next 的数组，虽然我在 HTML 文件中迭代那个数组。

我需要一些专家的帮助才能做到这一点吗？我正在努力将上面的文本映射到这种字符串数组（例如：array[hrfeLink][value])。希望有专家帮助我。

------------已更新--------------

按照评论说的，我试试这个方法，可以取到link位置。但是还是取不了值

  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'));
  }

Answer 1

你想要的value是什么？是link的锚文本吗?

我们创建一个接口 Link，其中包含我们希望从每个 link

获得的属性

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

然后我们创建一个函数，从 html 字符串中提取所有 link 并将它们转换为 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,
    }))
}

现在您可以对文本中的 link 进行任何操作

const text = `<html><body><a href="C:\Users\K\Documents\docker_command.txt">A.txt </a>
               <a href="C:\Users\Documents\B.txt">B.txt </a>
               <a href="C:\Users\K\Documents\D.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 Link

如何创建此字符串文本的字符串映射 "location" 和 "location Value Text"？

How to create a string map "location" and "location Value Text" of this string text?

html

string

dom

pattern-matching

typescript