正则表达式仅替换字母数字字符串

Question

我正在使用一种标记字母数字单词的工具，该工具带有从右键单击上下文菜单中选择的选项。 选择带有某些特殊字符的单词组时出现问题。

我正在使用在网站本身上找到的RegEx： /(\\s[a-zA-Z0-9]+)/g

要重现该问题，请从文本中选择123b @#$@#$或@#$@#$ a并单击鼠标右键，然后选择任何选项。 预期结果分别是[TAG] 123b @#$@#$或@#$@#$ [TAG] a 。

另外，如果我尝试标记以下完整的字符串，则它不起作用：
rahul@gmail.com 123a % / ! @$# % % %^* && ^ Lorem ipsum
预期的结果是：
[TAG] rahul@gmail.com [TAG] 123a % / ! @$# % % %^* && ^ [TAG] Lorem [TAG] ipsum [TAG] rahul@gmail.com [TAG] 123a % / ! @$# % % %^* && ^ [TAG] Lorem [TAG] ipsum 。

理想情况下，它应该标记串像123abc ， abc123 ， 12ab3 -任意数量的数字和字母。 如果选择了类似电子邮件地址的字符串，则也应对其进行标记。

我该如何解决？

jsFiddle

HTML：

<p contenteditable="true">rahul@gmail.com 123a % / ! @$# % % %^* && ^ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue tortor, dictum a turpis non, dapibus vehicula neque. 123b @#$@#$ a quam vel cursus. Duis at mattis quam, ornare consequat enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue tortor, dictum a turpis non, dapibus vehicula neque. Aliquam dictum a quam vel cursus. Duis at mattis quam, ornare consequat enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

JS：

function replaceText(selectedText, selectedTag){
    if(selectedText == "")
        return false;
    if(selectedText.match(/^[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/))
        replacedText = selectedText.replace(/(\s[a-zA-Z0-9]+)/g, " " + selectedTag + " " + "$1");
    else
        replacedText = selectedTag + " " + selectedText.replace(/(\s[a-zA-Z0-9]+)/g, " " + selectedTag + " " + "$1");
    originalText = $('p').html();
    newText = originalText.replace( new RegExp(selectedText,"g") , replacedText);
    $('p').html(newText);
}

Answer 1

这是更新的代码。

注意：我已经更新了else部分，以首先删除所有特殊字符，然后将所有出现的字符串替换为[tag] + string 。

HTML：

<p contenteditable="true">rahul@gmail.com 123a % / ! @$# % % %^* && ^ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue tortor, dictum a turpis non, dapibus vehicula neque. 123b @#$@#$ a quam vel cursus. Duis at mattis quam, ornare consequat enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue tortor, dictum a turpis non, dapibus vehicula neque. Aliquam dictum a quam vel cursus. Duis at mattis quam, ornare consequat enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

JavaScript：

var selectedTag, selectedText, originalText, newText, replacedText, selectedTextArray;

function getSelectedText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

function replaceText(selectedText, selectedTag){
    if(selectedText == "") {
        return false;
    }
    else {
        selectedText = selectedText.replace(/[^a-zA-Z0-9 ]/g,'');
        selectedText = selectedText.replace(/\s{2,}/g, ' ');
        selectedTextArray = selectedText.split(" ");
    }
    if(selectedTextArray.length > 0) {
        var selectedTextPart = '';
        originalText = $('p').html();
        newText = originalText;
        for(var i=0; i<selectedTextArray.length; i++) {
            selectedTextPart = selectedTextArray[i];
            selectedTextPart = new RegExp("\\b"+selectedTextPart+"\\b", "g");
            replacedText = selectedTag+' '+'$&';
            newText = newText.replace( selectedTextPart , replacedText);
        }
        $('p').html(newText);
    }
}

$.contextMenu({
    selector: 'p', 
    callback: function(key, options) {
        selectedTag = key;
        selectedText = $.trim(getSelectedText());
        replaceText(selectedText, selectedTag);
    },
    items: {
        "[ORG]": {name: "[ORG]"},
        "[PER]": {name: "[PER]"},
        "[LOC]": {name: "[LOC]"}
    }
});

Answer 2

他们说，保持简单。

我按以下类别细分了每个单词：

1. 字母数字
2. 字母数字，后跟。 或，（如句子中所示）
3. 电子邮件

然后，我向其中添加了标签，并在正文中替换了它。 而已！

function replaceText(selectedText, selectedTag){
    if(selectedText == "") {
        return false;
    }
    else{
        var selectedTextArray = selectedText.split(" ");

        originalText = $('p').html();

        selectedTextArray.forEach(function(item){
            if(item.match(/^[a-zA-Z0-9]+$/) // alphanumeric
               || item.match(/^[a-zA-Z0-9.,]+$/) // alphanumeric followed by . or ,
               || item.match(/([a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+))/) // email               
                ){
                    originalText = originalText.replace(new RegExp("\\b" + item + "\\b","g") , selectedTag + " " + item);

                }                 
        });
        newText = originalText;
    }

    $('p').html(newText);
}

jsFiddle