How to copy a HTML tag parameter value into another parameter of the same tag (for every tag in the source text)?

StackOverflow https://stackoverflow.com/questions/21870622

Question

I have got a huge HTML form where all the inputs have the name parameters set. I would like to also set id (to be equal to the name) for every input. Manual copying and pasting would be nasty as there are too many inputs actually. Of course I can write a program that would parse the tags and do just this but this looks a bit overkill too. Any suggestions?

UPDATE: I mean doing it at the HTML source code level rather than in the run time.

UPDATE2: The task actually means replacing every occurrence of the name="my-field" pattern (where there can be anything reasonable in place of my-field (but will contain the minus usually, so supporting just letters is not enough)) with name="my-field" id="my-field". I believe this can be done with something like sed but to my shame I am hardly proficient in regular expressions.

Was it helpful?

Solution 2

I would simply use a regex search & replace on the HTML file for this.

Given input...

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

..., a regex search on...

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

... and replacement with...

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

...would yield:

<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>

The above regex search & replace values use .NET's regex syntax, but they are easily adaptable to Java regex syntax or another regex syntax.

Actually, using the RegexPlanet Java regex tester, I confirmed that the above regex search & replace values should work as-is with an editor or other tool that supports Java regex syntax too.

OTHER TIPS

You can use javascript to achieve this: Something like this should work

<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>

If your HTML is XHTML (well-formed) (or if you can convert it into XHTML using JTidy, for example), you can use a XSLT transformation to copy the contents of the name attributes into new id attributes.

This stylesheet:

<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>

Will convert a file with this content:

<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>

Into this (adds a new id attribute to each input with the contents of the name attribute):

<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>

You can run a XSLT processor using command line tools line Saxon.

You can try this:

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

Haven't tested, but guess should work.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top