2014-11-20 2 views
-1

오른쪽 클릭 컨텍스트 메뉴에서 선택한 옵션을 사용하여 영숫자로 태그를 지정하는 도구를 작성하고 있습니다. 단어 집합에 몇 가지 특수 문자가 포함되어 있으면 문제가 발생합니다. 나는이 사이트 자체에서 발견이 정규식 사용하고영숫자 문자열 만 바꾸는 정규식

: /(\s[a-zA-Z0-9]+)/g

문제를 재현하기를, 텍스트와 마우스 오른쪽 버튼으로 클릭에서 123b @#[email protected]#$ 또는 @#[email protected]#$ a을 선택하고 옵션을 선택합니다. 예상 결과는 각각 [TAG] 123b @#[email protected]#$ 또는 @#[email protected]#$ [TAG] a입니다.
[email protected] 123a %/! @$# % % %^* &&^Lorem ipsum
이에 대한 예상 된 결과는 다음과 같습니다 :
[TAG] [email protected] [TAG] 123a %/! @$# % % %^* &&^[TAG] Lorem [TAG] ipsum 나는 다음과 같은 완전한 문자열에 태그를하려고하면

또한, 작동하지 않습니다.

이상적으로는 123abc, abc123, 12ab3과 같은 문자열에 숫자 및 문자를 붙여야합니다. 전자 메일 주소와 같은 문자열을 선택하면 해당 태그도 태그되어야합니다.

어떻게 수정합니까?

jsFiddle

HTML :

<p contenteditable="true">[email protected] 123a %/! @$# % % %^* &&^Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue tortor, dictum a turpis non, dapibus vehicula neque. 123b @#[email protected]#$ 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(/^[[email protected]#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/)) 
     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); 
} 

답변

1

은 간단하게, 그들은 말했다.

  1. 숫자 뒤에
  2. 숫자 :

    나는 folowing 범주의 모든 단어를 끊었다. 또는,

  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.!#$%&’*+/=?^_`{|}~-][email protected][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

1

업데이트 된 코드이다.

참고 : 내가 먼저 모든 특수 문자를 제거하고 [태그] + 문자열와 문자열의 모든 발생을 대체 할 다른 부분을 업데이트했습니다.

는 HTML :

<p contenteditable="true">[email protected] 123a %/! @$# % % %^* &&^Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue tortor, dictum a turpis non, dapibus vehicula neque. 123b @#[email protected]#$ 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> 

자바 스크립트 :

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]"} 
    } 
}); 
+0

작품 잘에 대한 질문에 언급 된 문자열. 하지만'123a % /! '를 선택하면 어떨까요? @ $ # % % %^* &&^Lorem'? –

+0

@RahulDesai 선택한 문자열이 ** 123a % /! 인 경우 예상 결과도 기록하십시오. @ $ # % % %^* &&^Lorem **. 이 문자열을 선택하면 어떤 결과가 나타 납니까 ?? ?? –

+0

질문에서 업데이트되었습니다. –

관련 문제