Javascript：仅当它是文本的第一个单词时才替换“x”，而不是其他任何地方

Question

我正在编写一个简单的 JS 代码，以使用数组将文本中的某些单词替换为其他单词。

<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>

结果是：

ar mi B
gar fo
ar di

但我想拥有这个：

B mi B
gar fo
B di

如果"e"s 要在" e"s 之前更改（e 之前有一个空格），那么" e"s 将不是" e" 而是“ar”，所以在数组中，我把" e" 放在"e" 上面，效果很好。

然而问题是文本可能包含一个分隔的"e" 作为整个文本的第一个单词，或者作为一行的第一个单词，之前没有空格。在这种情况下，如何将这个分隔的 "e" 替换为 "B" 并防止它被替换为 "ar"。

Answer 1

试试下面的代码。

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 2

一个简单的解决方法。

<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 3

这行得通。

<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 并不是真正的数组，而是一个对象。

Answer 4

您当前代码的问题是.replace 函数只接受一个变量输入。这限制了您在替换中使用更具体的正则表达式，因为匹配的元素将不匹配正则表达式。

.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