Question

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

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

\服务器\文件夹
\服务器\文件夹\
\服务器\文件夹\ FILENAME.TXT
C：\
c：\ folder
c：\ folder \
C：\文件夹\ FILENAME.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);
    }
}

}

Answer 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+)+

Answer 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);
        }
    }
}

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

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

3 个答案: