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

编程问答 2022-06-10

问题描述

我使用带有ngRx框架的anguler开发了项目。我使用TypeScript和HTML来开发前端。我的数据库已保存了如下所示的“ 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'));
  }

解决方法

您想要什么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

domhtmlpattern-matchingstringstringtypescripttypescripttypescript