>

명백한 단어를 별표로 바꾸는 콘텐츠를 편집 가능한 div로 만들고 싶습니다. 이것은 내 JavaScript 코드입니다 :

function censorText(){
    var explicit = document.getElementById("textbox").innerHTML;
    var clean = explicit.replace(/"badtext1","cleantext1"|"badtext2","cleantext2"/);
    document.getElementById("textbox").innerHTML = clean;
}

contenteditable div 의 HTML은 다음과 같습니다.

<div contenteditable="true" onkeyup="censorText()" id="textbox">Hello!</div>

보시다시피, 정규 표현식 연산자를 사용하여 여러 문자열을 한 번에 바꾸려고 시도했지만 작동하지 않습니다. badtext2 를 대체하지 않습니다   cleantext2 와 함께 그리고 그것은 badtext1 를 대체합니다   0 와 함께 . 단일 .replace() 를 만들 수 있습니까?  문이 여러 문자열을 대체합니까?

  • 답변 # 1

    /.../g 사용  전역 교체를 나타냅니다.

    var clean = explicit.replace(/badtext1/g,"cleantext2"/).replace(/cleantext1/g,"cleantext2"/).replace(/badtext2/g,"cleantext2"/);
    
    

  • 답변 # 2

    이를 처리하는 일반적인 방법은 다음과 같습니다.

    사전을 만들고 정규 표현식을 만드십시오 :

     var dictionary = { bad: 'good', worse: 'better', awful: 'wonderful'},
          regexp = RegExp ('\\b(' + Object.keys (dictionary).join ('|') + ')\\b', 'g');
    
    

    regexp는 사전 키워드로 구성됩니다 (RegExp 특수 문자를 포함해서는 안 됨).

    이제 교체 문자열 대신 함수를 사용하여 교체를 수행하면 해당 키 값만 반환합니다.

     text = text.replace (regexp, function (_, word) { return dictionary[word]; });
    
    

    OP는 대문자/소문자를 참조하지 않았다. 다음은 초기 및 모든 한도를 충족시키고 코드를 함수로 래핑합니다.

     function clean (text) {
        var dictionary = { bad: 'good', worse: 'better', awful: 'wonderful'},
            regexp = RegExp ('\\b(' + Object.keys (dictionary).join ('|') + ')\\b', 'ig');
        return text.replace (regexp, function (_, word) { 
          _ = dictionary[word.toLowerCase ()];
          if (/^[A-Z][a-z]/.test (word)) // initial caps
            _ = _.slice (0,1).toUpperCase () + _.slice (1);
          else if (/^[A-Z][A-Z]/.test (word)) // all caps
            _ = _.toUpperCase ();
          return _;
        });
      }
    
    

    바이올린 참조 : http://jsfiddle.net/nJNq2/

  • 답변 # 3

    Jinzhao의 답변에 대한 답변이지만 다른 참고 사항이 있습니다.
    1) RegEx에서 "를 사용하지 마십시오
    2) 여러 문자열을 일치시킬 수 있지만 단일 RegEx를 사용하여 하나의 값으로 만 대체한다고 생각합니다. Jinzhao가 한 것처럼 여러 항목을 일치시키는 것으로 생각할 수있는 유일한 방법입니다.

    다음 코드 스 니펫이 저에게 효과적입니다.

    function censorText(){             
        var explicit = document.getElementById("textbox").innerHTML;
        var clean = explicit.replace(/bad|worse/gi,"good");
         document.getElementById("textbox").innerHTML = clean;
    }
    
    

    내가 찾은 다른 문제는 교체가 발생하면 커서가 텍스트 상자의 시작 부분으로 커서를 돌려 실망시키는 것입니다. 이에 대한 답변을 찾으면 게시하겠습니다.

관련 자료

  • 이전 c - SIGSEGV 신호를 무시할 수없는 이유는 무엇입니까?
  • 다음 android - 버튼 하이라이트를 만드는 방법?