Geek asks and answers

JQuery: How to wrap RegEx-matched text in an anchor tag?

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 so that it looks like this:

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

Essentially, I want the regular expression to match the simple lines in the document with the 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 jsFiddle in this example: http://jsfiddle.net/NATnr/2/

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

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

+5
source share
4 answers

body contents() nodeType, , , jQuery ( 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

, HTML Regex ( ponies, ), HTML, , , .

edit: g ( ) Regex, Node.

+8

:

jQuery.fn.linker = function () {
    $(this).contents()
        .filter(function() { return this.nodeType != Node.TEXT_NODE; })
        .each(function () { $(this).linker(); });
    $(this).contents()
        .filter(function() { return this.nodeType == Node.TEXT_NODE; })
        .each(function () {
            $(this).replaceWith(
                $(this).text().replace(/(00\d+)/g, '<a href="#$1">$1</a>')
            );
        });
}
$(document).ready(function () {
    $('body').linker();
});

. jsFiddle : http://jsfiddle.net/fr4AL/4/

:

+5

bobince:

, HTML . , .html(); HTML, , , / JS.

Here's a simple JavaScript / DOM that allows you to map a RegExp pattern. jQuery doesn't really give you much useful information, since selectors can only select elements, and the :: switch contains a recursive one, so it’s not very useful for us.

// Find text in descendents of an element, in reverse document order
// pattern must be a regexp with global flag
//
function findText(element, pattern, callback) {
    for (var childi= element.childNodes.length; childi-->0;) {
        var child= element.childNodes[childi];
        if (child.nodeType==1) {
            findText(child, pattern, callback);
        } else if (child.nodeType==3) {
            var matches= [];
            var match;
            while (match= pattern.exec(child.data))
                matches.push(match);
            for (var i= matches.length; i-->0;)
                callback.call(window, child, matches[i]);
        }
    }
}

findText(document.body, /\bBuyNow\b/g, function(node, match) {
    var span= document.createElement('span');
    span.className= 'highlight';
    node.splitText(match.index+6);
    span.appendChild(node.splitText(match.index+3));
    node.parentNode.insertBefore(span, node.nextSibling);
});
0
source

Give it a whirlwind .;)

$('input').each(function() {
    var temp;
       temp = $(this).val();
       $(this).before('<a href="#' + temp +'">' +temp+ '</a>');
});
$('body').contents().filter(function() {return this.nodeType == 3;}).remove();
0
source

More articles:


All Articles