如何将 HTML 标签参数值复制到同一标签的另一个参数中（对于源文本中的每个标签）？答案

【问题标题】：How to copy a HTML tag parameter value into another parameter of the same tag (for every tag in the source text)?如何将 HTML 标签参数值复制到同一标签的另一个参数中（对于源文本中的每个标签）？
【发布时间】：2014-02-19 03:49:33
【问题描述】：

我有一个巨大的 HTML 表单，其中所有输入都设置了 name 参数。我还想为每个输入设置id（等于名称）。手动复制和粘贴会很讨厌，因为实际上输入太多。当然，我可以编写一个程序来解析标签并做到这一点，但这看起来也有点矫枉过正。有什么建议吗？

更新：我的意思是在 HTML 源代码级别而不是在运行时进行。

UPDATE2：该任务实际上意味着用 @ 替换每次出现的 name="my-field" 模式（可以有任何合理的东西来代替 my-field（但通常会包含减号，因此仅支持字母是不够的）） 987654325@。我相信这可以通过 sed 之类的东西来完成，但遗憾的是我几乎不精通正则表达式。

【问题讨论】：

我建议对此进行正则表达式搜索和替换；但是如果不了解input 元素属性的（不）一致性，就很难确切知道要建议什么模式和替换 - 例如。他们是否已经有id 属性，他们的name 和id 属性的顺序是否一致，如果他们这样做等等。您能否提供一个（经过清理的）示例来说明您要转换的内容？
name="my-field" to name="my-field" id="my-field" @J0e3gan 不幸的是，我不擅长使用正则表达式。

标签： html xml regex refactoring editor

【解决方案1】：

您可以使用 javascript 来实现：这样的东西应该可以工作

<html>
<head>
<script type="text/javascript">
**function loadId() { 
var inputs = document.getElementsByTagName('input');
for (var i = 0, len = inputs.length; i < len; i++) {
inputs[i].id = inputs[i].name;
}
}**
</script>
</head>
<body onload="loadId()">
<input name = "test1" /> 
<input name = "test2" /> 
<input name = "test3" /> 

</body>
</html>

【讨论】：

我想我更愿意在源代码级别而不是在运行时应用更改。

【解决方案2】：

为此，我只需在 HTML 文件上使用正则表达式搜索和替换。

给定输入...

<html>
  <head>
    <title>Whatever</title>
  </head>
  <body>
    <form>
      <input name="foo"/>
      <input name="bar"/>
      <input name="foo-bar"/>
    </form>
</html>

...，正则表达式搜索...

name="([a-zA-Z\-]+)"

...替换为...

name="$1" id="$1"

...会产生：

<html>
  <head>
    <title>Whatever</title>
  </head>
  <body>
    <form>
      <input name="foo" id="foo"/>
      <input name="bar" id="bar"/>
      <input name="foo-bar" id="foo-bar"/>
    </form>
</html>

上述正则表达式搜索和替换值使用.NET's regex syntax，但它们很容易适应Java regex syntax 或其他正则表达式语法。

实际上，使用RegexPlanet Java regex tester，我confirmed，上面的正则表达式搜索和替换值也应该与支持 Java 正则表达式语法的编辑器或其他工具一起工作。

【讨论】：

完成了这项工作。谢谢。

【解决方案3】：

如果您的 HTML 是 XHTML（格式正确）（或者如果您可以使用 JTidy 将其转换为 XHTML），您可以使用 XSLT 转换将名称属性的内容复制到新的 id 属性中。

这个样式表：

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    version="1.0">

    <xsl:output method="html" indent="yes"/>

    <xsl:template match="@*">
        <xsl:attribute name="{name()}">
            <xsl:value-of select="."/>
        </xsl:attribute>
    </xsl:template>

    <xsl:template match="*">
         <xsl:copy>
             <xsl:apply-templates select="*|@*|text()"/>
         </xsl:copy>
    </xsl:template>

    <xsl:template match="input">
        <xsl:copy>
            <xsl:attribute name="id">
                <xsl:value-of select="@name" />
            </xsl:attribute>
            <xsl:apply-templates select="@*" />
        </xsl:copy>
    </xsl:template>
</xsl:stylesheet>

将转换具有此内容的文件：

<form>
    <div class="inputs">
        <p style="color:red">Text</p>
        <input type="text" name="a" />
        <input type="password" name="b" />
        <input type="checkbox" name="c" />
        <input type="radio" name="d" />
    </div>
</form>

为此（使用name 属性的内容向每个input 添加一个新的id 属性）：

<form>
   <div class="inputs">
      <p style="color:red">Text</p>
      <input id="a" type="text" name="a">
      <input id="b" type="password" name="b">
      <input id="c" type="checkbox" name="c">
      <input id="d" type="radio" name="d">
   </div>
</form>

您可以使用命令行工具行 Saxon 运行 XSLT 处理器。

【讨论】：

我选择了@j0e3gan 的解决方案作为最快的解决方案，但您的解决方案看起来最完美。谢谢。

【解决方案4】：

你可以试试这个：

$("form#myForm :input").each(function(){
    var input = $(this); 
    input.attr('id', input.attr('name'));
});

尚未测试，但猜测应该可以。

【讨论】：