如何创建此字符串文本的字符串映射“位置”和“位置值文本”？答案

【问题标题】：How to create a string map "location" and "location Value Text" of this string text?如何创建此字符串文本的字符串映射“位置”和“位置值文本”？
【发布时间】：2021-01-18 15:45:08
【问题描述】：

我使用带有 ngRx 框架的 anguler 开发项目。我使用带有 HTML 的 TypeScript 来开发前端。我的数据库保存了如下所示的“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 并且由于它的配置，这不能在默认浏览器中直接打开，点击链接。

对于这项工作，我需要将 href 位置作为 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'));
  }

【问题讨论】：

有两种方法：您可以使用正则表达式从 HTML 字符串中提取值，或者您可以将parse the HTML 放入 javascript 文档中。我建议解析。
你能不能，请给我一个例子，我如何使用 domParser。我将创建 let x =new DOMParser() 对象。和 parser ->let doc = parser.parseFromString(stringHTML, "application/html") text like that

标签： html string typescript dom pattern-matching

【解决方案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:\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

【讨论】：

谢谢，这正是我所需要的。我需要位置和价值。 :) 谢谢。