javascript - 使用正则表达式和 javascript 将 anchor href 转换为唯一标签

标签 javascript regex

我有这个示例数据:

<products_database>
<product>
         <id>##1234
         <a name ="toy">toy</a>
         <weight>5kg
         <a href ="#block">block</a>
</product>
<product>
          <id>##56789
          <a name ="brick">brick</a>
          <a name ="lego">lego</a>
          <a name ="block">block</a>
          <weight>2kg
          <a href ="#toy">toy</a>
</product>
<product>
          <id>##1357902
          <a href ="#toy">toy</a>
          <a href ="#brick">brick</a>
          <weight>4kg
</product>
</product_database>

我想将 href 转换成:

<products_database>
<product>
         <id>##1234
         <a name ="toy">toy</a>
         <weight>5kg
         <..pd ##56789 #block>block</a>
</product>
<product>
          <id>##56789
          <a name ="brick">brick</a>
          <a name ="lego">lego</a>
          <a name ="block">block</a>
          <weight>2kg
          <..pd ##1234 #toy>toy</a>
</product>
<product>
          <id>##1357902
          <..pd ##1234 #toy>toy</a>
          <..pd ##56789 #brick>brick</a>
          <weight>4kg
</product>

href 将被转换成这个独特的标签,它在每个单独的“产品”中获取“id”,其中它们的“a href”值等同于它们的“a name”。我只允许使用 javascript 和正则表达式任何帮助将不胜感激。

最佳答案

我试图弄清楚您到底需要做什么,并编写了一个可能满足您需要的解决方案。

//var findProduct = /<product>\s+<id>(##\d+)\s+((?:<a name ="[^"]+">[^<]+<\/a>)+)\s+<weight>(\d+kg)\s+((?:<a href ="#[^"]+">[^<]+<\/a>)+)\s+<\/product>/g;

var byName = {}, products = [];

var findProduct = /<product>\s+([\W\w]+?)\s+<\/product>/g;
var findTag = /<([\w]+)(?: (name|href) ="#?([^"]+)")?>([^<\n\r]+)/g;

var data = document.getElementById("data").value;
data.replace(findProduct, function(match, tags) {
  var product = {
    id: "", names: [], weight: "", links: []
  };
  tags.replace(findTag, function(match, tagName, attr, attrValue, tagValue) {
    switch (tagName) {
      case "id": product.id = tagValue; break;
      case "weight": product.weight = tagValue; break;
      case "a":
        if (attr === "name") { product.names.push(attrValue); byName[attrValue] = product; }
        else /* if (attr === "href") */ { product.links.push(attrValue); }
        break;
    }
  });
  products.push(product);
});

data = "<product_database>" + products.map(function(product) {
  return "<product><id>" + product.id + "\n<weight>" + product.weight + "\n" +
    product.names.map(function(name) {
      return "<a name =\"" + name + "\">" + name + "</a>";
    }).join("\n") +
    product.links.map(function(link) {
      return "<..pd " + byName[link].id + " #" + link + ">block</a>";
    }).join("\n")
  + "\n</product>";
}).join("\n") + "</product_database>";

document.getElementById("data").value = data;
  <textarea id="data" cols=50 rows=30><products_database>
<product>
         <id>##1234
         <a name ="toy">toy</a>
         <weight>5kg
         <a href ="#block">block</a>
</product>
<product>
          <id>##56789
          <a name ="brick">brick</a>
          <a name ="lego">lego</a>
          <a name ="block">block</a>
          <weight>2kg
          <a href ="#toy">toy</a>
</product>
<product>
          <id>##1357902
          <a href ="#toy">toy</a>
          <a href ="#brick">brick</a>
          <weight>4kg
</product>
</product_database></textarea>

关于javascript - 使用正则表达式和 javascript 将 anchor href 转换为唯一标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40914246/

相关文章:

regex - 为什么这些正则表达式不起作用?

regex - 在Elasticsearch中使用正则表达式在匹配查询中斜杠不起作用

php - 棘手的问题 : How to order results from a multiple regexes

javascript - 确定 JavaScript 中缓存的 DOM 元素的内存使用情况?

javascript简写语法

javascript - 仅当我从主页启动流程时组件才会呈现

php正则表达式至少匹配3个字符?

javascript - 正则表达式:类似 Slack 的 'markdown',用于精确匹配一个格式化字符

javascript - 使用 jquery 调整文本区域的高度

javascript - 替换innerHTML会停止其他脚本的工作