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

Posted 2023-03-11

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

【英文标题】：Javascript: Replace 'x' only if it is the first word of a text, not anywhere else

【发布时间】：2017-06-04 22:05:03

【问题描述】：

我正在编写一个简单的 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"。

【问题讨论】：

有点困惑（也许只有我一个人），能否请您添加一个说明问题的示例？您给出的示例给出了我猜想要的输出

【参考方案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;

这是一种不同的方法，但我得到了预期的输出。

【讨论】：

我已将此代码 sn-p 保存在 JS fiddle 中。 https://jsfiddle.net/9k2khb0x/

【参考方案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>

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

【参考方案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