如何使用“a href”搜索/替换文本JavaScript中的包装器？ [英] How to search/replace text with an "a href" wrapper in JavaScript?

问题描述

我已经将html转换为字符串，我可以在该字符串中使用replace来包含带有链接的文本，然后我可以将该html放回到它来自的ID中。

I've converted html to a string, I'm able to use replace in that string to wrap the text with a link, and I can put that html back into the ID it came from.

我的问题是我的替换方法是在里面页面上的现有链接。这可能会创建嵌套链接，这是一个问题。有没有人知道如何阻止替换方法匹配链接中的文本？

My problem is that my replace method is going inside existing links on the page. This could create nested links, which is a problem. Does anyone out there know how to prevent the replace method from matching text that is within a link already?

我现在有：

keyword = "matching phrase";
keywordLink = "<a href='http://myurl.com'/>" + keyword + "</a>";
sasser = sasser.replace(keyword, keywordLink);
sasDom.innerHTML = sasser;

我正在寻找，伪代码：

... (keyword [if the next " < " sign is not followed by "/a>", regardless of how far away it is], keywordLink);

推荐答案

你不能用正则表达式做这种事情一点都不处理已经很好地解析成结构的文档对象。

You can't do this kind of thing with regex at all. Work on the document objects which are already nicely parsed into a structure for you.

这是一个改编自这个问题。

// Find text in descendents of an element, in reverse document order
// pattern must be a regexp with global flag
//
function findTextExceptInLinks(element, pattern, callback) {
    for (var childi= element.childNodes.length; childi-->0;) {
        var child= element.childNodes[childi];
        if (child.nodeType===1) {
            if (child.tagName.toLowerCase()!=='a')
                findTextExceptInLinks(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]);
        }
    }
}

findTextExceptInLinks(document.body, /\bmatching phrase\b/g, function(node, match) {
    node.splitText(match.index+match[0].length);
    var a= document.createElement('a');
    a.href= 'http://www.example.com/myurl';
    a.appendChild(node.splitText(match.index));
    node.parentNode.insertBefore(a, node.nextSibling);
});

eta re comments：这是使用纯文本匹配而不是正则表达式的同一个版本：

eta re comments: Here's a version of the same thing using plain text matching rather than regex:

function findPlainTextExceptInLinks(element, substring, callback) {
    for (var childi= element.childNodes.length; childi-->0;) {
        var child= element.childNodes[childi];
        if (child.nodeType===1) {
            if (child.tagName.toLowerCase()!=='a')
                findPlainTextExceptInLinks(child, substring, callback);
        } else if (child.nodeType===3) {
            var index= child.data.length;
            while (true) {
                index= child.data.lastIndexOf(substring, index);
                if (index===-1)
                    break;
                callback.call(window, child, index)
            }
        }
    }
}

var substring= 'matching phrase';
findPlainTextExceptInLinks(document.body, substring, function(node, index) {
    node.splitText(index+substring.length);
    var a= document.createElement('a');
    a.href= 'http://www.example.com/myurl';
    a.appendChild(node.splitText(index));
    node.parentNode.insertBefore(a, node.nextSibling);
});

这篇关于如何使用“a href”搜索/替换文本JavaScript中的包装器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！