Javascript/RegEx 在文件名周围添加 <b> 标签答案

【问题标题】：Javascript/RegEx to add <b> tags around filenamesJavascript/RegEx 在文件名周围添加 <b> 标签
【发布时间】：2013-03-20 23:00:26
【问题描述】：

我想做的是找到页面上的所有文件名/文件路径，并使用 javascript 将它们加粗。

一些示例文件名/路径是：

\服务器\文件夹
\服务器\文件夹\
\server\folder\filename.txt
c:\
c:\文件夹
c:\文件夹\
c:\文件夹\文件名.txt

以下示例将使用正则表达式模式“test.t..”查找字符串并将其变为粗体（即，将找到 test.txt 并将其变为粗体）。我需要将该正则表达式更改为可以找到文件名/文件路径的正则表达式（只是使用了一个简单的示例，我自己对文件名/文件路径正则表达式没有任何运气）。

findAndReplace(document);

function findAndReplace(root) {
var children = root.childNodes;
var pattern = new RegExp('test.t..', 'ig');
var node;
for(var i = 0, l = children.length; i < l; i++) {
    node = children[i];
    if(node.nodeType === 3) { // we have a text node
      if (node.nodeValue.match(pattern)){
      var newValue = "<b>" + node.nodeValue.match(pattern) + "</b>";
      node.parentElement.outerHTML = node.parentElement.outerHTML.replace(pattern, newValue);
      }

    } else if(node.nodeType === 1) { // Element node
        findAndReplace(node);
    }
}

}

【问题讨论】：

您应该查看提供给innerHTML: How To Avoid 的答案。基本策略是在元素内容上递归查找文本节点。然后将文本字符串分割成匹配和不匹配文本的文本节点。然后将匹配项包装在 B 元素中。

标签： javascript regex

【解决方案1】：

这是一个可以尝试的模式：

var pattern = /([a-z]:)?(\\\w+)+(\\|\.\w{3,4})?/;

解释：

([a-z]:)?        -  optionally starts with a drive letter and colon
\\               -  backslash
\w+              -  folder name
(\\\w+)+         -  several subfolders possible
(\\|\.\w{3,4})?  -  optionally ends with a backslash or file extension
                    note that the file name would be caught by (\\\w+)+

【讨论】：

【解决方案2】：

快速回复：http://jsfiddle.net/dCE9k/1/

我稍微更改了您的代码，请参阅小提琴中的工作示例。

正则表达式应如下所示：

/([a-zA-Z]:)?([\/\\])([a-zA-Z0-9\.]\2?)*/ig;

它关心驱动器号，捕获目录分隔符并在整个文件路径中重复使用它。允许大写、小写、数字和点作为有效的文件名。

我使用了这个演示 HTML 代码

<p>\server\folder</p>
<p>\server\folder\</p>
<p>\server\folder\filename.txt</p>
<p>c:\</p>
<p>c:\folder</p>
<p>c:\folder\</p>
<p>c:\folder\filename.txt</p>

我对你的 JS 代码做了一些调整：

findAndReplace(document);

function findAndReplace(root) {
    var children = root.childNodes;
    var pattern = /([a-zA-Z]:)?([\/\\])([a-zA-Z0-9\.]\2?)*/ig; // applied new regex
    var node;

    for(var i = 0, l = children.length; i < l; i++) {
        node = children[i];
        if(node.nodeType === 3) { // we have a text node
            if (pattern.test(node.nodeValue)){ // This line changed (maybe not required)
                var newValue = "<b>" + node.nodeValue.match(pattern) + "</b>";
                node.parentElement.innerHTML = newValue; // This line changed
            }
        } else if(node.nodeType === 1) { // Element node
            findAndReplace(node);
        }
    }
}

【讨论】：

【解决方案3】：

我尝试了您的代码，但它不起作用...即使我更正了正则表达式...

所以有解决办法：

    <!DOCTYPE html>
    <html>
    <head>
    <title>My Page</title>
    <script>
    function findAndReplace(root) {
        var children = root.childNodes;
        var pattern = /([a-zA-Z]:[\\\/]|[\\\/])(\w+[\\\/])*\w+\.\w{3}/g;
        var node;
        for(var i = 0, l = children.length; i < l; i++) {
            node = children[i];
            if(node.nodeType === 3) { // we have a text node
                if (node.nodeValue.match(pattern)) {
                    var mySpan = document.createElement("span");
                    mySpan.innerHTML = "<b>" + node.nodeValue.match(pattern) + "</b>";
                    node.parentNode.replaceChild(mySpan, node);
                }

            } else if(node.nodeType === 1) { // Element node
                findAndReplace(node);
            }
        }
    }
    </script>
    </head>
    <body onload="javascript:findAndReplace(document);">
    <form name="myform" action="test" method="POST">
    <div align="center"><br>
    <input type="radio" name="group1" value="Milk" /> Milk.txt<br />
    <input type="radio" name="group1" value="Butter" checked /> Butter.txt<br />
    <input type="radio" name="group1" value="Cheese" /> Cheese.tes
    <hr />
    <input type="radio" name="group2" value="Water"/> /bonjour.tsh<br />
    <input type="radio" name="group2" value="Beer" /> Beer.txt<br />
    <input type="radio" name="group2" value="Wine" checked /> /Milk.txt<br />
    </div>
    /Milk.txt
    </form>
    c:/bonjour/Milk.txt<br />
    c:\test.txt
    </body>
    </html>

【讨论】：