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

Question

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

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

它会像这样自动解析它：

您应该访问 <a href="http://stackoverflow.com">StackOverflow</a>。我在 <a href="http://en.wikipedia.org/wiki/">维基百科</a> 上找到了它。

仅使用 JavaScript 是否可行？

感谢您的帮助。:-)

Answer 1

您想要创建一个干净且可扩展的代码是创建一个 word => 链接库，然后您可以对其进行迭代并在您的代码中进行替换。

这是一个小提琴演示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 2

如果您正在预处理文本，则可以使用replace带有回调的函数和使用交替的正则表达式：

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

实例| 资源

Answer 3

是的，使用 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 4

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

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

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/