Javascript： 'x'はテキストの最初の単語である場合にのみ置き換えます。

Question

単純なJSコードを使用して、テキストを使用して一部の単語をテキスト内の他の単語に置換しています。

ar mi B 
gar fo 
ar di 

しかし、私はこれを持っていることを望む：

<textarea id="text1"> 
e mi e 
ke fo 
e di 
</textarea> 
<button type="button" onclick="myFunction()">try</button> 
<pre id="demo"></pre> 

<script> 
function myFunction() { 
    var str = document.getElementById("text1").value; 
    var mapObj = { 
     "k":"g", 
     " e": "B", 
     "e":"ar" 
    }; 

    var re = new RegExp(Object.keys(mapObj).join("|"),"gi"); 
    str = str.toLowerCase().replace(re, function(matched){ 
    return mapObj[matched]; 
    }); 
    document.getElementById("demo").innerHTML = str; 
} 
</script> 

結果は"e" sがそれの前にスペースをeを分離" e" S（前に変更される場合

B mi B 
gar fo 
B di 

）、" e"は" e"ではなく "ar"なので、配列では" e"をの上に置きますとうまく動作します。

しかし、問題は、テキスト全体がテキスト全体の最初の単語または前のスペースのない最初の単語として分離された"e"を含む可能性があるということです。この場合、どうすればこのように分離した"e"を"B"に置き換えて、"ar"に置き換えられないようにすることができます。

Answer 1

現在のコードの問題は、.replace関数が1つの変数入力のみを受けていることです。これは、一致する要素が正規表現と一致しないため、置き換えでより特定のRegExpを使用することを制限します。

.replaceの関数オプションは、一致したグループへのアクセスを1+nth variablesとして提供します。その結果、置換文字列を配列内で検索することができます。

RegExpグループを使用することで、探している値を取得し、必要に応じて置換することができます。

JS

var myFunction = function() { 
    var str = document.getElementById("text1").value; 
    var regexs = ['(k)','(^e|\\se)', '(e)']; 
    var replacers = ['g', 'B', 'ar']; 
    var re = new RegExp(regexs.join("|"),"gi"); 
    // you would need to add variables to the function for each matching group you add (currently there are 3 so we have 3 groups) 
    str = str.toLowerCase().replace(re, function(raw, group0, group1, group2){ 
     if(typeof group0 !== "undefined"){ 
      return replacers[0]; // replaces with 'g' 
     }else if(typeof group1 !== "undefined"){ 
      // skip over the first character (white space) and concatenate the replacement 
      return raw[0] + replacers[1]; // replaces with 'B' 
     }else if(typeof group2 !== "undefined"){ 
      return replacers[2]; // replaces with 'ar' 
     } 
     return raw; 
    }); 
    document.getElementById("demo").innerHTML = str; 
}; 
document.getElementById('go').addEventListener('click', myFunction); 

CSS

#demo{ 
    white-space:pre; 
} 

注：あなたが要素に出力しているので.innerHTML上記CSSせずに、新しい行が表示されません。混乱

JS FIDDLE

Answer 2

次のコードを試してください。

function myFunction() { 
    var str = document.getElementById("text1").value; 
    str = str.toLowerCase().split('k').join('g').split(' e').join(' B').split('\\n').join(' B').split('e').join('ar'); 
    document.getElementById("demo").innerHTML = str; 
} 

これは別のアプローチですが、期待される出力が得られました。

Answer 3

簡単な回避策。

<script type="text/javascript"> 
var myfunction = function(){ 

    var f = document.getElementById('text1').innerHTML; 
    var c = f.replace(/e/ig,'ar').replace(/\bar/ig,'B').replace(/k/ig,'g'); 
    document.getElementById('text1').innerHTML = c; 

} 
</script> 

Answer 4

これは機能します。

<textarea id="source" cols="5" rows="5"> 
e mi e 
ke fo 
e di 
</textarea> 

<button type="button" onclick="convert()">Convert</button> 

<textarea id="destination" cols="5" rows="5"> 
</textarea> 

<script> 
function replaceWord(searchFor, replaceWith, paragraph) { 
    if (paragraph) { 
     var lines = paragraph.split('\n'); 
     for (lineNo = 0; lineNo < lines.length; lineNo++) { 
      var words = lines[lineNo].split(' '); 
      for (wordNo = 0; wordNo < words.length; wordNo++) { 
       if (words[wordNo] === searchFor) { 
        words[wordNo] = replaceWith; 
       } 
      } 
      lines[lineNo] = words.join(' '); 
     } 

     paragraph = lines.join('\n'); 
    } 

    return paragraph; 
} 

function replaceWords(wordMap, paragraph) { 
    for(var searchFor in wordMap) 
    { 
     if(wordMap.hasOwnProperty(searchFor)) 
     { 
      paragraph = replaceWord(searchFor, wordMap[searchFor], paragraph); 
     } 
    } 
    return paragraph; 
} 

function convert() { 

    var mapObj = { 
     "ke":"gar", 
     "e": "B" 
    }; 

    var source = document.getElementById("source"); 
    var destination = document.getElementById("destination"); 

    destination.value = replaceWords(mapObj, source.value); 
} 
</script> 

ここはjsFiddleです。 https://jsfiddle.net/1egs7zgc/

mapObjは実際にはオブジェクトではありません。