Home/ Questions/Q 8291599
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T13:11:11+00:00

Suppose I have an HTML page that looks something like this: <html><body> 00123 <input

  • 0

Suppose I have an HTML page that looks something like this:

<html><body>
00123
<input value="00123">
00456
</body></html>

And I want to use javascript/jQuery to make it look like this:

<html><body>
<a href="#00123">00123</a>
<input value="00123">
<a href="#00456">00456</a>
</body></html>

Essentially I want to wrap regular expression matched plain strings in the document with HTML anchor tags. In this example, I want to do something like:

$('body').html($('body').html().replace(/(00\d+)/, '<a href="#$1">$1</a>'));

See the jsFiddle with this example: http://jsfiddle.net/NATnr/2/

The problem with this solution is that the text inside the input element is matched and replaced.

Does anyone know how to only match and replace plain text in a document in this manner using javascript/jQuery?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try filtering the body‘s contents() by nodeType to get only the Text Nodes, then replace them with jQuery-generated anchor elements (any extra text in these nodes will be kept as Text Node):

    $('body').contents().filter(function() {
    return this.nodeType === 3;
}).each(function() {
    $(this).replaceWith($(this).text().replace(/(00\d+)/g, '<a href="#$1">$1</a>'));
});

    Fiddle

    As you know, most often it’s not a good idea to parse HTML with Regex (look out for the ponies, they are evil), but if you isolate a part of the HTML you want to parse and it follows a relatively simple pattern, it is a viable option.

    edit: Included the g flag (global modifier) in your Regex to allow for matching multiple anchors inside a single Text Node.

    • 0