Question

我有一个论坛，我想自动解析一些主要链接。例如，如果用户发布了这样的帖子：

您应该访问StackOverflow。我在维基百科上找到了它。

它会自动解析它：

您应该访问＆lt; a href =“http://stackoverflow.com”＆gt; StackOverflow＆lt; / a＆gt;。我在＆lt; a href =“http://en.wikipedia.org/wiki/”＆gt; Wikipedia＆lt; / a＆gt;上找到了它。

这是否只能使用JavaScript？

感谢您的帮助。： - ）

Answer 1

如果您正在预处理文字，可以使用replace函数和callback以及使用替换的正则表达式：

var str = "You should visit StackOverflow. I found it on Wikipedia.";
str = str.replace(/StackOverflow|Wikipedia|etc/gi, function(m) {
    var href;
    switch (m.toLowerCase()) {
        case "stackoverflow";
            href = "http://stackoverflow.com";
            break;
        case "wikipedia";
            href = "http://en.wikipedia.org";
            break;
        // ...and so on...
    }
    return '<a href="' + href + '">' + m + '</a>';
});

YMMD指出上述内容需要两次定义每个关键字，这是真的。当我必须使用大量关键字执行此操作时，我通过将关键字作为键，href值作为值，并动态构建表达式的对象来完成此操作：

// ==== Setup code you presumably do once

// The substitutions -- make sure the keys are in lower case
var substitutions = {
    "stackoverflow": "http://stackoverflow.com",
    "wikipedia":     "http://en.wikipedia.org",
    // ...and so on...
};

// Build the regex. Here I've used `Object.keys` which is an ES5 feature
// but you can use an ES5 shim (since it's something a shim can provide).
// Note that if your keywords include any special regular expression
// characters, you'll have to loop through the keys manually and escape
// those.
var subrex = new RegExp(Object.keys(substitutions).join("|"), "gi");

// ==== Where you're using it
var str = "You should visit StackOverflow. I found it on Wikipedia.";
str = str.replace(subrex, function(m) {
    return '<a href="' + substitutions[m.toLowerCase()] + '">' + m + '</a>';
});

Live example | source

Answer 2

是的，使用String.replace（regex，replaceString）来做到这一点。

以下是一个例子：

var text = "You should visit StackOverflow. I found it on Wikipedia.";

var newText=text.replace(/stackoverflow/gi,
                         "<a href='http://www.stackoverflow.com/'>StackOverflow</a>");

g代表全局，因此它将替换所有实例，而i代表不区分大小写的搜索。

如果您要替换常用字词，例如“字典”以链接到dictionary.com，如果您的用户添加了特殊标记，那么最好只更换它，例如：

"You should visit StackOverflow. I found it on Wikipedia."

不应该用链接替换，除非它是这样写的：

"You should visit &StackOverflow. I found it on Wikipedia."

然后你的方法只需要添加特殊符号。

另外，我会将数据放在这样的数组中：

var linkArray = [ ["StackOverflow", "http://www.stackoverflow.com/", "Description"],
                  ["Wikipedia", "http://wikipedia.org/", "Free encyclopedia"] ];

然后创建一个循环来查找和替换实例：

function addLinks(textInput) {
    for (var i=0; i<linkArray.length; i++) {
        textInput = addLink(textInput, linkArray[i]);
    }
    return textInput;
}

function addLink(textInput, link) {
    var replaceString = "<a href=\"" + link[1] + "\" title=\""
                      + link[2] + "\">"
                      + link[0] + "</a>";
    return textInput.replace(new RegExp("&"+link[0], "gi"), replaceString);
}

Answer 3

您想要创建一个干净且可扩展的代码是创建一个word =＆gt;的库。链接然后你可以迭代它并在你的代码中进行替换。

这是一个演绎http://jsfiddle.net/MjV84/

的小提琴演示

$(function() {

    var text = $('#foo').text(),
        library = {
            stackoverflow: 'http://stackoverflow.com',
            wikipedia: 'http://wikipedia.com'
        },
        name;

    for (name in library) {
        text = text.replace(new RegExp(name, 'gi'), function(word) {
            return '<a href="' + library[name] + '">'+word+'</a>';
        });  
    };

    $('#foo ').html(text);
});

Answer 4

如果目标，使用正则表达式上的i修饰符的所有先前答案都将失败 string包含根据大小写不同的替换字符串的变体。这是因为 target string substring与替换属性名称不匹配。

此版本通过捕获每个替换字符串并在arguments数组中搜索找到的字符串来解决此问题。

function substitute (str) { 'use strict';
  var substitutions = {
        "Stack Overflow": "http://stackoverflow.com",
        "Wikipedia":     "http://en.wikipedia.org",
        // ...and so on...
      },
      skeys = Object.keys (substitutions);

  // build regexp which will capture each match separtely
  return str.replace (new RegExp ('(' + skeys.join(")|(") + ')', "gi"), function (m0) {
    // Now scan the arguments array (omitting the last two arugments which
    // are the source string and match index)
    for (var ai, i = arguments.length - 2; --i;) {
      // The index of the argument (less 1) corresponds to the index in skeys of
      // the name in the substitutions  
      if ((ai = arguments[i])) {
        return '<a href="' + substitutions[skeys[i - 1]] + '">' + ai + '</a>';
      }
    }    
    return m0;    
  });
}


var str = "You should visit stack overflow. I found it on Wikipedia."; 

// check in console log that links are correctly built.
console.log (substitute (str));
document.write (substitute (str));

请参阅jsfiddle：http://jsfiddle.net/NmGGN/

在关键字前添加字符串 - javascript

4 个答案: